CSS Cubic-Bezier Generator

What is CSS Cubic-Bezier Generator?

CSS Cubic-Bezier Generator is a free visual editor for the easing functions used by CSS transitions and animations, built for front-end developers and motion designers. In cubic-bezier mode you drag two control points (or type them) to shape a curve; the x values stay within the legal 0–1 range while the y values can pass 1 or drop below 0 for overshoot and anticipation. A steps() mode covers stepped timing with an adjustable step count and a jump term — jump-start, jump-end, jump-none or jump-both, where step-start and step-end are steps(1, …). A live animation preview plays the current easing on a box that moves and scales for a duration you set, you can overlay any preset as a ghost curve to compare, and you can import an existing cubic-bezier() or steps() string. Copy the exact declaration for your transition-timing-function or animation-timing-function.

How to use CSS Cubic-Bezier Generator

1. Choose cubic-bezier() or steps() mode at the top, or open Settings to seed a preset like ease, ease-in-out or linear.
2. In cubic-bezier mode, drag the two handles on the graph or type exact x1, y1, x2 and y2 values; push y past 1 or below 0 for overshoot.
3. In steps() mode, set the number of steps and pick a jump term (jump-start, jump-end, jump-none or jump-both) to draw the staircase.
4. Press Play to run the live animation on the moving, scaling box, and adjust the duration in seconds to feel the timing.
5. Pick a comparison curve in Settings to overlay a preset as a ghost on the same graph, or paste a value into Import and apply it.
6. Copy the generated cubic-bezier() or steps() value 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.34, y1 1.56, x2 0.64, y2 1

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

steps mode, N 4, jump-end

steps(4, jump-end)

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.

What is steps() mode for?

steps() jumps between a fixed number of values instead of interpolating smoothly — handy for sprite animations, ticking counters or frame-by-frame effects. Set the step count and a jump term: jump-start, jump-end, jump-none or jump-both. step-start equals steps(1, jump-start) and step-end equals steps(1, jump-end).

How does the live animation preview work?

Press Play and the box moves across the track and scales using your current easing, repeating back and forth. Change the duration in seconds to slow it down or speed it up; it uses pure CSS animation with your cubic-bezier() or steps() value as the timing function.

Can I import an existing easing value?

Yes. Paste a cubic-bezier(...) or steps(...) value — or a keyword like ease-in-out, step-start or step-end — into the Import field and apply it; the editor parses it back into the control points or step settings.

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.