CSS Cubic Bezier Generator

A cubic-bezier generator is a visual editor for CSS easing curves. CSS transitions and animations interpolate between a start and end state over a duration, and the easing function controls how that interpolation progresses — whether it accelerates slowly then catches up, overshoots and settles, or moves at a constant speed. CSS ships with named keywords (ease, ease-in, ease-out, ease-in-out,linear), but the real expressive power lives in cubic-bezier(x1, y1, x2, y2): four numbers that define a curve between (0,0) and (1,1).

The curve is drawn by two control handles. The first handle sits at (x1, y1) and pulls the start of the animation; the second at (x2, y2) pulls the end. If you push y1 above 1 or y2 below 0, the curve will overshoot past the end state and return — this is how you create bouncy or anticipatory motion. Stripe's signature "pop" effect uses cubic-bezier(0.22, 1, 0.36, 1): a curve that rises steeply at the start and settles decisively, which feels crisp and responsive.

Practical presets. The linear curve is suspicious outside of very specific cases — it feels mechanical because nothing in the real world moves at constant speed. ease-out is the most flattering default for most UI: fast start, slow stop, like an object decelerating under friction. ease-in is for elements leaving the screen or fading out. Spring-like presets (anticipate, bounce) are great for playful interactions — toast notifications, playful empty-state illustrations, onboarding moments — but feel wrong for serious UI like forms and tables.

Performance is identical for every named and cubic-bezier easing — the browser just interpolates one number over time, which is trivially cheap. What matters is which property you animate. Animating transform and opacity is GPU-accelerated and smooth at 60fps; animating width, height,left, or top triggers layout and can jank on complex pages.

Use the output for both transition-timing-function and animation-timing-function — they accept the same cubic-bezier functions. For micro-interactions (button hover, tab focus), durations of 120–200ms with a ease-out-shaped curve feel responsive. For larger movements (drawer slide, modal appear), 250–400ms with a slight overshoot (cubic-bezier(0.22, 1, 0.36, 1)) feels polished. For hero animations, 500–900ms with a distinctive curve builds brand-specific motion identity.

1. Start from a preset — ease-out for most UI, or pick a named curve to modify.
2. Drag the control handles to reshape. The animated dot shows the feel of the curve.
3. Push above 1 or below 0 for overshoot / anticipation effects.
4. Copy the CSS — works for both transition-timing-function and animation-timing-function.

• Drag-to-edit bezier curve with two control points.
• Live playback preview so you can feel the motion, not just see the curve.
• Eight presets including CSS defaults and opinionated picks.
• Copy-ready CSS for transition and animation use.