What does a cubic-bezier curve actually represent?

The X axis is time, the Y axis is progress. A straight diagonal (`cubic-bezier(0, 0, 1, 1)` = `linear`) means progress is proportional to time - boring motion. An S-curve (the default `ease`) means progress is slow at first, fast in the middle, slow at the end - what your eye expects from a physical object accelerating then decelerating. The two handles control how aggressive that S-curve is.

Can the curve go above 1 or below 0?

Y can - and that's how you get bounce, overshoot and anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` overshoots both at the start and the end, producing a 'rubber band' feel. X cannot - the spec requires the time axis to stay in 0-1, otherwise the easing wouldn't be a function and the browser couldn't sample it. Drag the handle below 0 or above 1 in Y to play with overshoot.

Which preset should I use for which kind of animation?

Use `ease-out` (or Material's 'decelerate') for elements entering the screen - they feel like they're landing softly. Use `ease-in` ('accelerate') for elements leaving - they feel like they're being whisked away. Use `ease-in-out` ('standard') for elements that move within the screen (panel slides, card flips). Use `linear` only for repeating animations (a spinner) - it's the only easing that loops without visible jolts.

Why does the Material 'standard' curve feel different from CSS `ease`?

CSS `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)` - a gentle S-curve. Material's standard is `cubic-bezier(0.4, 0, 0.2, 1)` - more aggressive deceleration. The Material curve feels more 'designed': elements arrive quickly and slow into place. CSS `ease` was chosen in the late 90s and predates the modern UI motion conventions; most design systems override it.

Can I use cubic-bezier in JavaScript animation libraries?

Yes. GSAP, Framer Motion, Anime.js and the Web Animations API all accept cubic-bezier values. The exact prop name varies (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), but the four numbers are universal - copy them out of this generator and they work everywhere.

Cubic-Bezier Generator

Visual cubic-bezier editor with animated preview and 12 industry-standard easing presets.

Runs in your browser

Drag the two handles to shape the curve. The preview ball runs the easing on loop so you feel the timing, not just see the maths. Presets cover the four CSS keywords (ease, ease-in, ease-out, ease-in-out) and the canonical Material Design curves (standard, decelerate, accelerate, sharp). Values are clamped where browsers require it - the x-axis stays within 0-1, the y-axis can overshoot (negative or above 1) to produce bounce and anticipation effects.

Presets

Drag the orange dots to reshape the curve.

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Preview

How to use it

Pick a preset
CSS keywords (ease, ease-in, ease-out, ease-in-out) or Material curves (standard, decelerate, accelerate, sharp) - one click loads the values.
Drag the handles
P1 and P2 reshape the curve. The animated preview ball updates in real time, so you can feel the new timing before you commit.
Watch the preview
The ball loops the easing forever. Switch between move, scale and opacity to see how the same curve feels on different properties.
Copy the value
The `cubic-bezier(x1, y1, x2, y2)` string is ready to paste into your CSS transition, animation or JS easing prop.

What is it?

Cubic-bezier is the easing function format used by CSS transitions, CSS animations, the Web Animations API and most JavaScript animation libraries. It takes two control points (P1 and P2) inside the unit square; combined with the implicit start point (0,0) and end (1,1), they define a curve that maps elapsed time to progress. The shape of the curve is what makes animations feel snappy, gentle, bouncy or robotic.

When to use it

Designing motion for a design system (which curve for entry, exit, in-place moves), matching a specific platform's motion language (Material, iOS, custom), creating bouncy click feedback with overshoot curves, smoothing CSS transitions on hover/focus, picking the right easing for chart animations (linear for axes, ease-out for bars), and explaining easing to teammates without diving into the maths.

Common mistakes

Using `linear` for one-shot motion - it feels mechanical because no real-world object moves at constant velocity. Picking a different easing for every transition in a UI - inconsistent motion feels janky; design systems pin 3-5 curves and use them everywhere. Forgetting that overshoot curves can clip if the animated property has bounds (a rotation can overshoot; a slide that would go off-screen looks broken). Animating slow properties with aggressive curves - a 2-second slide with a sharp ease-out feels like a glitch.

FAQ

What does a cubic-bezier curve actually represent?: The X axis is time, the Y axis is progress. A straight diagonal (`cubic-bezier(0, 0, 1, 1)` = `linear`) means progress is proportional to time - boring motion. An S-curve (the default `ease`) means progress is slow at first, fast in the middle, slow at the end - what your eye expects from a physical object accelerating then decelerating. The two handles control how aggressive that S-curve is.
Can the curve go above 1 or below 0?: Y can - and that's how you get bounce, overshoot and anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` overshoots both at the start and the end, producing a 'rubber band' feel. X cannot - the spec requires the time axis to stay in 0-1, otherwise the easing wouldn't be a function and the browser couldn't sample it. Drag the handle below 0 or above 1 in Y to play with overshoot.
Which preset should I use for which kind of animation?: Use `ease-out` (or Material's 'decelerate') for elements entering the screen - they feel like they're landing softly. Use `ease-in` ('accelerate') for elements leaving - they feel like they're being whisked away. Use `ease-in-out` ('standard') for elements that move within the screen (panel slides, card flips). Use `linear` only for repeating animations (a spinner) - it's the only easing that loops without visible jolts.
Why does the Material 'standard' curve feel different from CSS `ease`?: CSS `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)` - a gentle S-curve. Material's standard is `cubic-bezier(0.4, 0, 0.2, 1)` - more aggressive deceleration. The Material curve feels more 'designed': elements arrive quickly and slow into place. CSS `ease` was chosen in the late 90s and predates the modern UI motion conventions; most design systems override it.
Can I use cubic-bezier in JavaScript animation libraries?: Yes. GSAP, Framer Motion, Anime.js and the Web Animations API all accept cubic-bezier values. The exact prop name varies (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), but the four numbers are universal - copy them out of this generator and they work everywhere.