CSS Cubic Bezier Generator

What this cubic-bezier generator does

It turns four control-point numbers into a ready-to-paste CSS cubic-bezier(x1, y1, x2, y2) timing function — the same value you'd hand to transition-timing-function or animation-timing-function — and draws the exact curve those numbers describe, so you can see the easing before you ship it. Pick one of 29 named presets (the standard ease/ease-in/ease-out/ease-in-out/linear keywords, plus the fuller Sine, Quad, Cubic, Quart, Quint, Expo, Circ and Back families popularised by easings.net and used throughout Material Design), or switch to Custom and dial in your own X1/Y1/X2/Y2.

How to use it

1. Choose a preset from the dropdown, or pick Custom.
2. If you picked Custom, set X1, Y1, X2 and Y2. X1 and X2 are clamped to 0–1 (the CSS spec requires it); Y1 and Y2 can be any number.
3. Copy the CSS code block — it includes both the transition-timing-function/animation-timing-function declarations and a worked transition: example at your chosen duration.
4. Check the curve preview and the Curve details table, which tells you whether the easing is a standard eased curve or one that overshoots.

What do X1, Y1, X2, Y2 actually control?

A CSS cubic-bezier curve always starts at (0, 0) and ends at (1, 1) — those two points are fixed by the spec and aren't configurable. X1/Y1 and X2/Y2 are the two control points that pull the curve between them, the same way the handles on a bezier curve in a vector-drawing tool do. X represents progress through the duration of the animation (so it must stay between 0 and 1 — a value outside that range makes the whole cubic-bezier() invalid CSS, and the browser ignores it). Y represents progress through the property being animated — and it's allowed to go below 0 or above 1.

Why does the curve preview go outside the box?

Whenever Y1 or Y2 falls outside 0–1, the animated value briefly overshoots its target or dips backward before settling — that's exactly what curves like ease-in-back (a slight "wind-up" before moving) or ease-out-back (a slight overshoot before settling) are for. It's completely valid CSS, not a mistake; the preview's dashed reference box just makes it visible. A cubic bezier's curve always stays within the shape formed by its four points, so whenever both Y1 and Y2 sit inside 0–1 the whole curve is guaranteed to as well — that's the "standard eased curve" case the details table reports.

Is my data private?

Yes. Everything — building the CSS string and drawing the SVG preview — runs entirely in your browser. Nothing is uploaded or logged.