Cubic Bezier Easing Editor
Drag a cubic-bezier curve to design custom CSS easing. Live animation preview, presets, overshoot support, and one-click copy of the timing function.
Presets
Live preview
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Drag the green (P1) and red (P2) handles. X is clamped to 0–1 per the CSS spec; Y may overshoot for bounce-style easing.
What a cubic-bezier does
CSS animations and transitions don't have to move at a constant speed. The cubic-bezier(x1, y1, x2, y2) timing function maps elapsed time (the X axis, 0→1) to animation progress (the Y axis). The curve always runs from (0,0) to (1,1); the two control points you drag bend it in between.
The named keywords are just presets: ease is cubic-bezier(.25,.1,.25,1), linear is a straight diagonal. A custom curve is how you get character.
Reading the curve
- Steep section = fast. Where the curve rises sharply, lots of progress happens in little time.
- Flat section = slow. A nearly horizontal stretch means the animation barely moves there — used for anticipation or settling.
- Overshoot: pulling a handle's Y above 1 (or below 0) makes the value pass its target and spring back — the classic “back” / bounce feel. X stays locked to 0–1 because time can't run backwards.
Practical guidance
Entering elements
Prefer ease-out style curves (fast start, soft landing) so content arrives quickly and settles gently.Exiting elements
Prefer ease-in (slow start, accelerating away) — the eye doesn't need to track something that's leaving.Using it in CSS
Drop the copied value into any transition-timing-function, animation-timing-function, or the shorthand: transition: transform .4s cubic-bezier(.34,1.56,.64,1);. The same syntax works in Framer Motion, GSAP and most animation libraries. Note cubic-bezier can't express true springs or multi-bounce — for those use a spring/keyframe approach.