What do the two points on the curve actually control?

cubic-bezier(x1, y1, x2, y2) defines two control points for a curve that always starts at (0,0) and ends at (1,1). P1 pulls the start of the motion toward itself and P2 pulls the end — moving a point up speeds the animation through that portion of its progress, moving it down slows it.

Why can the Y values go above 1 or below 0?

The X axis (time) is clamped to 0–1 because a cubic-bezier must be a function of time, but Y (the animated value's progress) isn't clamped — that's what lets you build overshoot effects like Back Out (value briefly exceeds 100%) or Back In (value briefly goes negative) before settling.

Is this the same curve browsers use for ease, ease-in, etc.?

Yes — ease, ease-in, ease-out, and ease-in-out are all just cubic-bezier() shorthand keywords with fixed control points (e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1)); the presets here reproduce their exact point positions so you can start from a familiar curve and tweak it.

Can I use the same easing for a CSS animation instead of a transition?

Yes — the cubic-bezier() value works identically as transition-timing-function or animation-timing-function; just swap which property you assign it to depending on whether you're animating a state change (transition) or a @keyframes sequence (animation).

Does this tool store or upload anything?

No — every point and preview is generated and rendered locally in your browser. Nothing is sent to a server.

CSS CUBIC-BEZIER EASING CURVE EDITOR

Drag the curve handles, preview the motion, and copy the cubic-bezier() value.

Presets

Duration: 900ms

cubic-bezier(0.25, 0.1, 0.25, 1)

.eased {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.eased.is-active {
  transform: translateX(260px);
}

How to use the easing editor

1
Drag the two orange handle points to shape the curve, or click a named preset.
2
Watch the dot in the motion preview to feel how the curve translates into movement.
3
Adjust the duration slider and hit Replay to re-run the preview.
4
Copy the cubic-bezier() value and the example CSS/HTML.

Questions

What do the two points on the curve actually control?: cubic-bezier(x1, y1, x2, y2) defines two control points for a curve that always starts at (0,0) and ends at (1,1). P1 pulls the start of the motion toward itself and P2 pulls the end — moving a point up speeds the animation through that portion of its progress, moving it down slows it.
Why can the Y values go above 1 or below 0?: The X axis (time) is clamped to 0–1 because a cubic-bezier must be a function of time, but Y (the animated value's progress) isn't clamped — that's what lets you build overshoot effects like Back Out (value briefly exceeds 100%) or Back In (value briefly goes negative) before settling.
Is this the same curve browsers use for ease, ease-in, etc.?: Yes — ease, ease-in, ease-out, and ease-in-out are all just cubic-bezier() shorthand keywords with fixed control points (e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1)); the presets here reproduce their exact point positions so you can start from a familiar curve and tweak it.
Can I use the same easing for a CSS animation instead of a transition?: Yes — the cubic-bezier() value works identically as transition-timing-function or animation-timing-function; just swap which property you assign it to depending on whether you're animating a state change (transition) or a @keyframes sequence (animation).
Does this tool store or upload anything?: No — every point and preview is generated and rendered locally in your browser. Nothing is sent to a server.