Glas- und Rahmen-Effekte
Milchglas, Verlaufsrahmen und Leuchten für Karten und Hero-Bereiche. Echtes CSS mit Vorschau, kopierbar als CSS, Tailwind oder HTML.
Im Editor öffnenCSS-Effekte und Layouts
Easing-Kurven (CSS cubic-bezier und linear)
Easing-Kurven für Übergänge und Animationen gestalten: cubic-bezier() oder eine Feder als linear(), mit CSS- und Tailwind-Code zum Kopieren.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Eine Easing-Kurve bestimmt, wie schnell sich eine Animation in jedem Moment bewegt: langsam am Anfang, schnell am Ende oder mit einem kleinen Nachfedern. In CSS ist sie die Zeitfunktion von transition und animation, geschrieben als cubic-bezier() oder für Federn als linear() mit vielen Punkten.
Wofür du es brauchst
Knöpfe und Hover-Effekte
Ein kurzes Auslaufen lässt Knöpfe und Links direkt reagieren, ohne zu ruckeln.
Dialoge und Menüs
Overlays, die mit einer weichen Kurve hereingleiten, wirken natürlich; ein kleiner Überschwung gibt Charakter.
Designsysteme
Benenne deine Kurven einmal als CSS-Variablen oder Tailwind-Tokens und nutze überall dieselbe Bewegung.
So geht’s
Wähle eine Bezier-Kurve oder eine Feder. Verschiebe die beiden Griffe oder stelle Steifigkeit und Dämpfung ein und sieh dem Punkt auf der Bahn zu. Lege Dauer und Variablennamen fest und kopiere Übergang, Animation oder Tailwind-Theme. Mit der Leertaste würfelst du eine neue Kurve.
Easing-Kurven jetzt ausprobierenTipps
- Auslaufende Kurven passen zu Elementen, die erscheinen, anlaufende zu Elementen, die verschwinden.
- Übergänge in Oberflächen sollten 150 bis 400 ms dauern; länger wirkt träge.
- Jeder Code-Export schaltet die Bewegung für Menschen ab, die weniger Bewegung wünschen.
Häufige Fragen
- Was ist der Unterschied zwischen cubic-bezier und linear()?
- cubic-bezier() beschreibt eine glatte Kurve mit zwei Griffen. linear() listet viele Punkte auf und kann darum Federn und Abpraller zeichnen, die eine einzelne Bezier-Kurve nicht schafft.
- Unterstützen alle Browser linear()?
- Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen es. Ältere Browser ignorieren den Wert und nehmen das Standard-Easing; ergänze bei Bedarf ein cubic-bezier als Rückfall.
- Warum gehen manche Griffe über 1?
- Ein Fortschritt über 1 oder unter 0 heisst, dass das Element über sein Ziel hinausschiesst oder vor dem Start kurz zurückweicht. So entstehen Überschwung und Anlauf.
- Kann ich die Bewegung als GIF exportieren?
- Ja. Exportiere ein GIF über die Zeit, dann spielt der Punkt die Kurve ab der Position in der Vorschau ab.
Passende Generatoren
Alle Generatoren in CSS-Effekte und Layouts
Bento-Grid
Ungleich grosse, abgerundete Kacheln in einem Raster, ohne Lücken. Für Feature-Sektionen, Portfolios und Social-Grafiken, als CSS Grid, Tailwind oder Bild.
Im Editor öffnen
CSS-Schatten-Generator
Weiche, mehrschichtige Schatten für Karten und Buttons. Vorschau mit echtem CSS, Export als box-shadow, Tailwind oder drop-shadow.
Im Editor öffnen
Animierter Farbverlauf
Wandernde, drehende und farbwechselnde Verläufe und schwebende Flecken als reines CSS. CSS, Tailwind oder HTML kopieren, PNG und GIF exportieren.
Im Editor öffnen
Fliessende Schriftskala
Schriftgrössen, die mit der Bildschirmbreite wachsen: eine typografische Skala als CSS clamp(), mit CSS-Variablen und Tailwind-Theme zum Kopieren.
Im Editor öffnen
Abschnittstrenner-Generator
Wellen, Bögen, Schrägen, Zacken und mehr als Übergang zwischen zwei Website-Abschnitten. Ein SVG, das sich jeder Breite anpasst, mit HTML und CSS zum Kopieren.
Im Editor öffnen