Cubic-Bezier-Generator
NeuEine CSS-Easing-Kurve durch Ziehen von Kontrollpunkten gestalten — mit Live-Vorschau.
Runs entirely in your browser. Nothing is uploaded.
CSS-Easing-Kurven visuell gestalten
Dieser Cubic-Bezier-Generator macht den abstrakten Wert cubic-bezier(x1, y1, x2, y2) zu etwas Sichtbarem und Spürbarem. Ziehe die beiden Kontrollpunkt-Griffe im Graphen, um eine Beschleunigungskurve zu formen, beobachte eine Live-Vorschau mit genau diesem Timing und kopiere dann einen sofort einsatzbereiten Wert für deine CSS-Übergänge und -Animationen. Es ist ein vollständiger Easing-Kurven-Editor und Cubic-Bezier-Visualizer in einem, der komplett im Browser läuft — ohne Installation, ohne Account.
Jede Kurve verläuft von (0,0) bis (1,1). Die horizontale Achse ist die Zeit und die vertikale Achse ist der Fortschritt. Eine Kurve, die früh steil ansteigt, bedeutet einen schnellen Start; eine, die sich gegen Ende abflacht, bedeutet ein sanftes Ende. Gib genaue Zahlen in die vier Eingabefelder ein, ziehe die Griffe oder füge einen vorhandenen cubic-bezier()-Wert ein, um ihn zu laden und anzupassen. Das Ergebnis aktualisiert sich bei jeder Griffbewegung in Echtzeit.
30+ Presets: CSS-Keywords und benannte Easing-Kurven
Die Preset-Leiste vereint zwei Dinge, die Konkurrenten meist trennen. Du bekommst die fünf CSS-Schlüsselwörter — linear, ease, ease-in, ease-out und ease-in-out — sowie den vollständigen Katalog benannter Easing-Kurven, der durch easings.net bekannt wurde: Sine, Quad, Cubic, Quart, Quint, Expo, Circ und Back, jeweils in den Varianten In, Out und In-Out. Das bedeutet, easeInOutCubic, easeOutQuart, easeOutBack und alle anderen sind einen Klick entfernt und bereits in einen CSS-cubic-bezier-Wert umgewandelt.
Jedes Preset zeigt eine kleine Kurvenvorschau, damit du die Form auf einen Blick erkennst, und lädt sie dann direkt in den Editor, wo du sie verfeinern kannst. Easings.net listet nur die Namen und zeigt statische Bilder — Bearbeitung oder Export ist dort nicht möglich. cubic-bezier.com zeigt die fünf CSS-Keywords, aber nicht den vollständigen Penner-Satz. Dieses Tool bietet beides, mit Bearbeitung, an einem Ort.
Überschwingen, Rückprall und Anticipation
Die y-Werte eines Cubic-Bezier sind nicht auf 0–1 beschränkt. Schiebe einen Griff über die Box hinaus, und die Animation überschießt ihr Ziel, bevor sie sich einpendelt — das federnde Gefühl von easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Ziehe einen Griff unter die Box, und das Element holt erst aus, wie ein Anlauf vor einem Sprung. Der Graph des Editors erstreckt sich über die Einheitsbox hinaus, sodass du in diesen Überschwing-Bereich ziehen und das Ergebnis sofort in der Vorschau sehen kannst.
Chrome DevTools hat einen eingebauten Cubic-Bezier-Editor, klemmt die Griffe aber auf die 0–1-Box — Überschwingen oder Anticipation sind dort nicht möglich. Firefox DevTools hat dieselbe Einschränkung. Beiden fehlt außerdem der benannte Preset-Katalog und die Exportoptionen, die hier zur Verfügung stehen. Für Überschwing-Effekte ist dieses Tool eines der wenigen, das sie tatsächlich unterstützt.
Vergleich mit anderen Cubic-Bezier-Tools
cubic-bezier.com von Lea Verou ist die Referenz, die das Drag-and-Preview-Format populär gemacht hat, und bleibt ausgezeichnet für schnelle CSS-Kurvengeneration. Es hat jedoch keinen GSAP-Export, keine JavaScript-Easing-Funktion, keinen Vergleichsmodus, keine Penner-Preset-Bibliothek, und die Oberfläche bricht auf Mobilgeräten zusammen. Easings.net ist eine reine Nachschlagereferenz — du wählst eine benannte Kurve und siehst die Werte, aber es gibt keinen Editor und nichts zum Anpassen.
Chrome und Firefox DevTools enthalten je einen leichtgewichtigen Cubic-Bezier-Editor im Browser-Inspektor, was praktisch ist, wenn man ohnehin in DevTools ist. Der Nachteil: Man kann sie nicht ohne geöffnete DevTools nutzen, sie klemmen Griffe auf 0–1 (kein Überschwingen), können keinen GSAP- oder JS-Code exportieren und funktionieren überhaupt nicht auf Mobilgeräten. UtiloKits Generator kombiniert den interaktiven Editor, die Preset-Bibliothek, das Vergleichswerkzeug und drei Exportformate auf einer einzigen Seite, die auf jedem Gerät funktioniert.
Live-Vorschau und Seite-an-Seite-Vergleich
Drücke Play, und ein Demo-Element läuft mit deiner Kurve in Schleife, damit du die Bewegung beurteilst — nicht nur die Zahlen. Wechsle die Demo zwischen translate, scale und opacity und passe die Dauer an deine echte Animation an. Aktiviere Vergleichen, um eine zweite Kurve neben die erste zu stellen — ideal, um die richtige Transition-Timing-Funktion zu wählen, bevor du sie in die Produktion übernimmst.
Der Dauer-Schieberegler steuert die Vorschaugeschwindigkeit von 200ms bis 3 Sekunden, damit du testen kannst, wie sich dieselbe Kurve bei verschiedenen Geschwindigkeiten anfühlt. Eine Zeitlupe-Vorschau enthüllt oft Probleme — wie ein Ruckeln am Anfang — die bei 300ms unsichtbar sind. Die meisten anderen Tools, einschließlich cubic-bezier.com, zeigen die Vorschau nur mit einer festen Geschwindigkeit und bieten keinen Seite-an-Seite-Vergleich.
Exportieren nach CSS, GSAP und JavaScript — kostenlos
Kopiere, was dein Stack braucht. Der CSS-Reiter liefert sowohl eine einzeilige transition-Kurznotation als auch einen vollständigen @keyframes-Animationsblock. Der GSAP-Reiter gibt einen CustomEase.create()-Aufruf aus, damit deine GSAP-Animation exakt zur Kurve passt. Der JS-Reiter erzeugt eine eigenständige Javascript-cubic-bezier-Easing-Funktion — ein Newton-Raphson-Löser, den du ohne Abhängigkeiten in requestAnimationFrame oder einen beliebigen Tween einfügen kannst.
Eine Kurve gefunden, die dir gefällt? Teile sie. Das Tool kodiert die vier Werte in der Seiten-URL, sodass ein Link dein genaues Easing auf jedem Gerät reproduziert. Alles läuft in deinem Browser — nichts wird hochgeladen, gespeichert oder protokolliert — und es ist komplett kostenlos ohne Registrierung.
Frequently asked questions
Was ist cubic-bezier in CSS?
cubic-bezier() ist eine Easing-(Timing-)Funktion, die durch eine Bézier-Kurve definiert wird. Man schreibt sie als cubic-bezier(x1, y1, x2, y2) in transition-timing-function oder animation-timing-function, und ihre zwei Kontrollpunkte biegen die Kurve so, dass eine Animation beschleunigt und verlangsamt, anstatt sich mit konstanter Geschwindigkeit zu bewegen. Zum Beispiel ist cubic-bezier(0.25, 0.1, 0.25, 1) exakt dasselbe Easing wie das CSS-Schlüsselwort 'ease'.
Wie funktionieren die vier cubic-bezier-Werte?
cubic-bezier(x1, y1, x2, y2) gibt zwei Kontrollpunkte an: P1 = (x1, y1) zieht den Anfang der Kurve und P2 = (x2, y2) zieht das Ende. Die Kurve selbst beginnt immer bei (0,0) und endet bei (1,1). Die x-Werte stellen die Zeit dar und müssen zwischen 0 und 1 bleiben; die y-Werte stellen den Fortschritt dar und können unter 0 fallen oder über 1 steigen für Überschwing-Effekte. Ziehe die beiden Griffe im Graphen und alle vier Zahlen aktualisieren sich live.
Was ist der Unterschied zwischen ease, ease-in, ease-out und ease-in-out?
linear bewegt sich mit konstanter Geschwindigkeit ohne Easing — für die meisten Oberflächen wirkt das unnatürlich. ease — der CSS-Standard — startet etwas schnell und verlangsamt sich dann. ease-in startet langsam und beschleunigt zum Ende hin, was oft wie etwas Fallendes wirkt. ease-out startet schnell und verlangsamt sich, was für auf dem Bildschirm erscheinende Elemente meist am natürlichsten wirkt. ease-in-out ist an beiden Enden langsam und in der Mitte am schnellsten, ideal für Elemente, die über den Bildschirm wandern und sanft zum Stehen kommen müssen.
Können die y-Werte von cubic-bezier über 1 steigen oder unter 0 fallen?
Die y-Werte können das, und so entstehen Überschwing- und Anticipation-Effekte. Die x-(Zeit-)Werte bleiben immer auf 0–1 begrenzt, aber ein y über 1 lässt das Element sein Ziel überschießen und zurückkommen — wie eine Feder — während ein y unter 0 es zuerst zurückziehen lässt. Ein klassisches Beispiel ist easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Dieser Editor erlaubt es, die Griffe außerhalb der 0–1-Box zu ziehen.
Wie verwende ich cubic-bezier in einem CSS-Übergang oder einer Animation?
Füge es in den Timing-Funktion-Slot ein. Für einen Übergang: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Für eine Keyframe-Animation: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. Der CSS-Reiter in diesem Tool generiert beide Snippets automatisch mit deiner aktuellen Kurve und Dauer, sodass du sie direkt in dein Stylesheet kopieren und einfügen kannst.
Wie konvertiere ich ein benanntes Easing wie easeInOutQuad zu cubic-bezier?
Lade es aus dem Preset-Katalog — die Penner-/easings.net-Kurven haben alle standardmäßige cubic-bezier-Näherungen. Zum Beispiel easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1) und easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). Wähle die benannte Kurve aus der Galerie und kopiere den Wert direkt in dein CSS.
Ist dieser Cubic-Bezier-Generator kostenlos und datenschutzfreundlich?
Völlig kostenlos, keine Anmeldung erforderlich und nichts wird irgendwohin hochgeladen. Der Kurven-Editor, die Live-Vorschau und der CSS-, GSAP- und JavaScript-Export laufen lokal in deinem Browser. Nichts, was du erstellst, wird an einen Server gesendet, daher bleibt deine Arbeit vollständig auf deinem Gerät. Du kannst eine Kurve auch über einen Link teilen, der die vier Werte in der URL kodiert — kein Account nötig.
Related tools
Alle Tools ansehen
Neu Farbmischer
Zwei Farben in beliebigem Verhältnis mischen und das Ergebnis oder jeden Schritt kopieren.
Neu Bild-Farbpicker
Wähle jede beliebige Farbe aus einem Bild und extrahiere die dominante Palette als HEX, RGB und HSL.
Neu Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Neu Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Farbwähler & Konverter
Eine Farbe wählen und zwischen HEX, RGB, HSL und OKLCH umwandeln.
Neu Farbkontrast-Prüfer
WCAG-AA/AAA-Kontrastverhältnisse zwischen Text- und Hintergrundfarben prüfen.