Skip to content
Work data is processed in your browser, not stored on our servers.
tools
CSS Cubic Bezier Easing Generator

CSS Cubic Bezier Easing Generator

Drag two control points to create a cubic-bezier timing curve for CSS animations and transitions, then preview the motion.

Focus mode

Drag the two control points to adjust the curve.

cubic-bezier(0.25, 0.1, 0.25, 1)
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
x10.25y10.1x20.25y21

Key features

  • Edits the easing curve by dragging two control points on an SVG graph.
  • Keeps CSS-valid X coordinates from 0 to 1 and allows Y overshoot from -0.5 to 1.5.
  • Includes linear, ease, ease-in, ease-out, and ease-in-out presets.
  • Replays a moving-ball animation to visualize acceleration and deceleration.
  • Copies either the cubic-bezier() value or a transition-timing-function declaration.

How to use

  1. Choose a preset or drag the two graph handles.
  2. Use the animation preview to inspect the timing feel.
  3. Copy the cubic-bezier value or full CSS declaration.

Examples

  • Tune button and panel transitions

    Move the control points and replay the animation until the acceleration and deceleration feel right.

  • Hand off a CSS easing value

    Start from a linear or ease preset, refine it, and copy either the cubic-bezier value or the full transition-timing-function declaration.

Privacy

Curve editing, animation preview, and CSS generation run in your browser.

Common questions

Can I start from standard CSS easing presets?
Yes. Choose linear, ease, ease-in, ease-out, or ease-in-out, then adjust the two control points.
What output can I copy?
You can copy the cubic-bezier(x1, y1, x2, y2) value or the complete transition-timing-function declaration.

Related tools