CSS Easing Generator
Craft cubic-bezier and steps() timing functions on a draggable curve editor with a live motion preview — 26 ready-made easings, overshoot support, and a linear comparison. Export the value, CSS, SCSS, Tailwind, or JS (Framer Motion).
About this ToolHow it works, benefits & use casesTap to collapse
Timing functions decide whether an animation feels mechanical or alive, and this editor lets you shape them by hand. Drag the two control-point handles to sculpt a cubic-bezier() curve — pull a handle above the top edge or below the bottom for an overshoot "back" effect, since the graph spans y from -0.75 to 1.75 so those curves stay fully visible. A linear reference line and a replaying ball preview let you feel your easing against a neutral baseline, with a speed slider to slow it down or speed it up. Twenty-six named presets (ease, the sine/quad/cubic/quart/expo/circ/back families) load with a click, and a Steps mode builds discrete step() functions with adjustable step count and jump term for sprite-sheet or typewriter motion. Export the bare value, CSS, SCSS, a Tailwind utility, or a JS array ready for Framer Motion.
How to Use
- 1Choose a Type: "Cubic bezier" for a smooth draggable curve, or "Steps" for discrete jumps.
- 2In cubic-bezier mode, drag the two handles on the curve editor — or nudge them with arrow keys — and read the x1/y1/x2/y2 fields below.
- 3Click a preset (ease-out, in-out-cubic, out-back, and so on) to load a ready-made curve.
- 4Watch the ball replay your easing against the faint linear reference, and adjust the Speed slider to taste.
- 5For Steps mode, set the step count and pick a jump term (jump-end, jump-start, jump-none, jump-both, start, end).
- 6Select an Output format — Value, CSS, SCSS, Tailwind, or JS — and copy, download, or share it.
Key Benefits
- Draggable cubic-bezier handles with keyboard nudging for precise tuning
- Overshoot ("back") support — the graph extends past 0–1 so those curves stay visible
- Live motion preview that replays your easing against a linear reference
- 26 named presets across the sine, quad, cubic, quart, expo, circ, and back families
- Steps mode with adjustable count and all six jump terms for sprite/typewriter motion
- JS export includes the Framer Motion bezier array
- Exports the raw value, CSS, SCSS, or a Tailwind utility, all shareable via URL
Common Use Cases
- Designing a snappy entrance animation for a modal or toast
- Adding a bouncy overshoot to a button press or card flip
- Building a typewriter or sprite-sheet animation with steps()
- Copying an easing into Framer Motion via the JS array export
- Comparing how different easing families feel before committing to one
your easing vs. linear
cubic-bezier(0.34, 1.56, 0.64, 1)Type
Parameters
Presets
Copy, download, share, or pipe to another tool
cubic-bezier(0.34, 1.56, 0.64, 1)
Drag the curve, feel the motion
Drag the two handles to shape a cubic-bezier()— pull them past the top or bottom edge for an overshoot (“back”) effect. The ball below replays your easing against a faint linear reference so you can feel the difference. Switch to steps() for sprite-sheet or typewriter motion. The JS export includes the Framer Motion array.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- Transition & Easing StudioDrag a cubic-bezier curve, play it on a live demo, and export CSS, @keyframes, Tailwind, Framer, or WAAPI
- CSS FormatterFormat and beautify CSS code
- Framer Motion GeneratorBuild Framer Motion variants, gestures, springs, and staggered lists with a live preview and copy-ready JSX
- Spring Animation CalculatorTune spring physics with a live curve and bouncing demo; export Framer, react-spring, or CSS linear() easing
- CSS MinifierMinify CSS code
- Parallax Effect CalculatorBuild multi-layer parallax with pure-CSS perspective, JS scroll, or React — scrollable live preview
Drag a control-point handle above the top edge or below the bottom edge of the curve editor. The graph deliberately spans y from -0.75 to 1.75 so overshoot curves stay fully visible and un-clamped, which is how the out-back and in-out-back presets get their bounce.
Steps mode generates a CSS steps() timing function that advances in discrete jumps instead of a smooth curve — perfect for sprite-sheet animations or a typewriter text effect. You set the number of steps and choose one of six jump terms: jump-end, jump-start, jump-none, jump-both, start, or end.