Skip to main content
Penguin ToolsPinguin-Tools

CSS Cubic-Bezier-Generator

Erstellen Sie CSS-Animations-Beschleunigungskurven visuell. Griffpunkte ziehen und Animationen in Echtzeit ansehen.

Voreinstellungen

Kurven-Editor

P1(0.25, 0.10)
P2(0.25, 1.00)

Vorschau

Dauer

1.0s

Ausgabe

cubic-bezier(0.25, 0.10, 0.25, 1.00)
transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);
Tool teilen
📖

Anleitung

Step 1

Kurve anpassen

Kurve anpassen

Bezier-Kurven-Griffpunkte ziehen

Step 2

Vorschau

Vorschau

Mit Animations-Vorschau überprüfen

Step 3

Kopieren

Kopieren

CSS-Code zur Verwendung kopieren

✨

Funktionen

Ziehbare Steuerung

Kontrollpunkte ziehen um die Kurve anzupassen

Voreinstellungen

Vorlagen wie ease, ease-in, ease-out

Animations-Vorschau

Beschleunigung mit Live-Animation ansehen

❓

FAQ

Eine Beschleunigungsfunktion, die Animations-Beschleunigungsmuster definiert.

🔗Verwandte Tools

🎨
Design-Tools

Farbcode-Konverter

Konvertieren Sie zwischen HEX-, RGB- und HSL-Farbcodes. Verwenden Sie die Farbauswahl und Echtzeit-Vorschau für intuitive Farbwahl.

🎨
Design-Tools

Farbwähler

Wählen Sie Farben intuitiv mit einem Farbrad und Schiebereglern. Farbcodes in HEX, RGB und HSL kopieren.

🎨
Design-Tools

Bild-Farbextraktor

Dominante Farben aus einem Bild automatisch erkennen und eine Farbpalette erzeugen. Sie können auch auf eine beliebige Stelle im Bild klicken, um einzelne Farben aufzunehmen.

🎯
Design-Tools

Bild-Durchschnittsfarbe-Picker

Berechnen Sie die Durchschnittsfarbe eines gesamten Bildes oder eines ausgewählten Bereichs. Nützlich für Farbschemata oder Thumbnail-Hintergrundfarben.

🌈
Design-Tools

CSS Farbverlauf-Generator

Erstellen Sie CSS-Farbverläufe visuell mit Ziehsteuerung. Unterstützt lineare, radiale und konische Farbverläufe mit Vorlagen.

🔲
Design-Tools

CSS Box-Shadow-Generator

Erstellen Sie CSS box-shadow visuell mit Schiebereglern. Unterstützt mehrere Schatten und Inset-Schatten.