CSS Cubic-Bezier Generator

What is CSS Cubic-Bezier Generator?

CSS Cubic-Bezier Generator is a free visual editor for the cubic-bezier() timing function used by CSS transitions and animations, built for front-end developers and motion designers. Pick a preset like ease, linear, ease-in, ease-out or ease-in-out, or fine-tune the two control points yourself: the x values are clamped to the legal 0–1 range while the y values can go above 1 or below 0 to create overshoot and anticipation. The preview plots the curve on a unit square so you can read acceleration and deceleration at a glance, and the exact cubic-bezier(x1, y1, x2, y2) declaration is produced for you to copy. Use it whenever a built-in keyword feels too generic and you want a snappier, springier or more deliberate motion.

How to use CSS Cubic-Bezier Generator

1. Open Settings and choose a starting preset — ease, linear, ease-in, ease-out or ease-in-out — to seed the control points.
2. Drag the two round handles on the curve preview to reshape the easing, or type exact values into the x1, y1, x2 and y2 fields.
3. Keep x1 and x2 between 0 and 1; push y1 or y2 above 1 or below 0 to add overshoot or anticipation to the motion.
4. Read the curve against the dashed linear baseline to judge how the easing accelerates and decelerates.
5. Copy the generated cubic-bezier() value and paste it into your transition-timing-function or animation-timing-function.

Examples

x1 0.25, y1 0.1, x2 0.25, y2 1

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

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Frequently asked questions

What do the four cubic-bezier numbers mean?

They are the coordinates of the two control points: x1, y1 for the first point and x2, y2 for the second. The curve always starts at (0,0) and ends at (1,1); the control points bend it in between, which controls how the animated property speeds up and slows down over time.

Why can't I set x1 or x2 above 1?

The CSS spec requires the x (time) coordinates of both control points to stay within 0 and 1, so the timing function stays a valid mapping from progress to output. This tool clamps the x fields and the drag handles to that range automatically. The y values, however, may exceed 1 or go below 0 to create overshoot or anticipation.

How do I make a bouncy or springy easing?

Push one of the y values above 1 (for overshoot at the end) or below 0 (for anticipation at the start). For example cubic-bezier(0.34, 1.56, 0.64, 1) overshoots before settling, giving a spring-like feel without any JavaScript.

Where do I use the generated value?

Paste it as the value of transition-timing-function or animation-timing-function — for example transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). It replaces keywords like ease or ease-in-out with your custom curve.

Is my data sent to a server?

No. The whole editor runs in your browser with JavaScript — the control points and the curve are computed locally and never uploaded, so it works privately and even offline once the page has loaded.