CSS Cubic-Bezier Generator — Visual Easing Curve Editor

What a Cubic-Bezier Curve Actually Shows

A cubic-bezier easing function is a graph where the horizontal axis represents elapsed time (0 to 1) and the vertical axis represents animation progress (0 to 1). A straight diagonal line from bottom-left to top-right is linear — equal progress at every moment. When you bend the curve, you change when the motion happens, not how long it takes. The duration is always set separately in your CSS transition or animation property. Think of the curve as a speed profile: steep sections move fast, flat sections crawl, and curves that reverse direction create overshoot or anticipation effects.

Y Values Outside 0–1 Are Where the Magic Lives

The two X coordinates are strictly constrained to [0, 1] because time cannot run backwards. But Y values? Those are free to roam. This tool allows Y to range from −0.5 to 1.5. A Y value above 1 means the animation overshoots its target before settling back — that is what creates bounce and elastic effects. A Y value below 0 anticipates the motion, pulling back before launching forward. Compare cubic-bezier(0.34, 1.56, 0.64, 1) (easeOutBack, which overshoots to y=1.56) against a simple ease-out that stays within the unit square: the difference is visible and tangible. This unconstrained Y axis is the single most useful fact about cubic-bezier.

The Named Keywords Are Just Cubic-Beziers

CSS defines four keyword values as preset cubic-bezier functions:

• ease: cubic-bezier(0.25, 0.1, 0.25, 1) — the default, easing in and out gently
• ease-in: cubic-bezier(0.42, 0, 1, 1) — slow start, fast finish; use when objects leave the screen
• ease-out: cubic-bezier(0, 0, 0.58, 1) — fast start, slow finish; use when objects arrive and settle
• ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — symmetric acceleration and deceleration

The tool includes ten presets covering common patterns: linear, the four keywords, plus easeOutBack (elastic snap), bounceOut (springy landing), and expo variants for extreme acceleration. You can apply the copied value directly to any transition or animation — no polyfills needed. For the keyframes themselves, see the animation generator.

What This Tool Does Not Cover

Cubic-bezier cannot express a curve that reverses in time, so it cannot create motion that rewinds partway through. Spring physics, which most animation libraries use, is a different model entirely and is not expressible as a cubic-bezier. The CSS function steps() is a separate timing function for discrete jumps, not smooth curves. This generator focuses on the single-curve case: one smooth easing from start to finish.