xtract.bot

Apps / CSS Generators / Cubic-Bezier Editor

Cubic-Bezier Editor

Edit a CSS cubic-bezier easing curve. Drag the two control points; the preview animation re-runs after each change.

01
Preview
CSS value
cubic-bezier(0.25, 0.1, 0.25, 1)
P1: 0.25, 0.10P2: 0.25, 1.00
Presets

What is this?

A visual CSS cubic-bezier easing editor. Drag the two control points; the live preview animation shows what your curve will feel like. Compare against the named CSS easings (linear, ease, ease-in, ease-out, ease-in-out) and copy the value.

Why cubic-bezier?

The named easings are fine for most cases but they're a tiny slice of what's possible. Custom bezier curves let you dial in the exact feel — gentle overshoot for confirmations, anticipation before a big movement, snappy decel for mass-feeling drops.

Overshoot / bounce

P1 and P2 can go above 1.0 or below 0.0 on the Y axis — the editor allows it and so does CSS. Curves that overshoot read as "springy" or "bouncy"; common for playful UI.

FAQ

How is this different from spring physics?
CSS cubic-bezier is a fixed-duration tween between two keyframes. Spring physics (e.g. Framer Motion) is duration-less — the system settles based on stiffness + damping. Bezier is simpler and lighter; springs feel more natural for interactions driven by user input.
Where can I use the result?
animation-timing-function, transition-timing-function, anywhere CSS accepts a timing function.

Related tools