CSS Cubic Bezier Generator

Control point 1 (x1, y1)

x10.25

y10.10

Control point 2 (x2, y2)

x20.25

y21.00

Presets

Duration (ms)

Generated CSS

/* Apply to transitions */
transition: all 800ms cubic-bezier(0.25, 0.10, 0.25, 1.00);

/* Apply to animations */
animation-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Preview

Click Play to animate the block with your easing curve.

Similar CSS Tools

View All

CSS Gradient Generator

Visually build linear or radial gradients, preview and copy CSS code.

→

CSS Box Shadow Generator

Design soft or sharp shadows for cards, avatars, or headers, then copy the CSS.

→

CSS Triangle Generator

Create CSS-only triangles in any direction, customize color and size, and copy the code.

→

Cubic Bezier Generator Guide

What it does

Design custom cubic-bezier easing curves. Adjust two control points and duration, preview the motion, then copy the CSS snippet for transitions or animations.

How to use

Set control point 1 (x1, y1) to influence the start of the curve.
Set control point 2 (x2, y2) to shape the end of the curve.
Adjust duration (ms) for the preview animation speed.
Click Play to see the easing effect applied to the block.
Copy the generated CSS and paste into transition/animation timing-function.

Tips

Keep x values within 0–1 for predictable easing; try gentle curves like (0.4, 0, 0.2, 1) for smooth UI animations.

FAQ

Notes

Preview block moves horizontally; easing applies to all transformable properties in your code.
Duration affects preview and the generated snippet.
Subtle curves often feel smoother than extremely steep ones.
Test across devices; very long durations may feel sluggish.