CSS Cubic Bézier Generator — Drag the Curve, Watch It Move
Drag the two control points; the dot underneath shows the easing.
Presets
Drag the two control points
cubic-bezier(0.25, 0.1, 0.25, 1)= ease
Runs on your device What you paste is processed by your own browser. It is never sent to a server, and it is not stored anywhere after you leave the page.
Short answer
A CSS easing curve can be built for free in a web browser by dragging the two control points of a cubic Bézier and copying the resulting cubic-bezier() value. The first and last points of a CSS timing function are fixed at 0,0 and 1,1, so the curve is defined by four numbers: the x and y of each control point. A dot animating under the curve shows what the easing actually feels like, and the five CSS keywords — linear, ease, ease-in, ease-out and ease-in-out — are available as presets to start from or compare against.
At a glance
| Accepts | Nothing to paste — the curve is dragged |
|---|---|
| Produces | A cubic-bezier() value, declaration, array or sample table |
| Processing | In your browser |
| Price | Free, no limits |
| Account | Not required |
Four numbers are not something anyone has an intuition for, which is why this page is a drag rather than four inputs. The curve is the shape of the motion: time runs left to right, progress runs bottom to top, and a steep section is a fast one.
The preview is the part that settles an argument. Two curves can look almost identical on the grid and feel completely different on screen — a late, sharp finish reads as snappy, the same curve ten percent flatter reads as sluggish — so the dot moves under the real timing function at the duration you pick rather than at some fixed demo speed.
Control points can be dragged above the top of the band or below the bottom. That is not a glitch: a y value above 1 overshoots and settles back, which is how a bounce is written in a single curve. x stays inside 0 to 1 because CSS rejects a timing function whose control points leave that range — it would not be a function of time any more.
How to use it
- 1
Drag the two points
Or start from a preset — linear, ease, ease-in, ease-out, ease-in-out — and adjust from there. Arrow keys nudge a focused point by 0.01, with shift for 0.1.
- 2
Watch the dot
It moves under your curve at the duration selected, pausing at each end so the start and the finish are both visible.
- 3
Pick what you want back
The bare cubic-bezier() value, a ready transition and animation-timing-function declaration, the four numbers as a JavaScript array, or the progress at every tenth of the duration.
- 4
Copy it
Copy to the clipboard, or download it as a text file.
Frequently asked questions
What do the four numbers in cubic-bezier() mean?
They are the two control points: x1, y1, x2, y2. P0 is fixed at 0,0 (no time passed, no progress made) and P3 at 1,1 (all the time, all the progress), so only the middle two points are yours to set. x is the fraction of the duration, y the fraction of the change.
Why can the handles go above the box but not past its sides?
A y above 1 or below 0 means the animation overshoots its end value and comes back — a bounce or an anticipation — which is perfectly valid CSS. An x outside 0 to 1 would make time run backwards within the curve, and the spec does not allow it.
Which curve matches the CSS keywords?
linear is cubic-bezier(0, 0, 1, 1), ease is (0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), and ease-in-out is (0.42, 0, 0.58, 1). All five are presets here, and the readout names the keyword when your curve is exactly one of them.
What is the samples output for?
Implementing the same easing somewhere CSS cannot reach — a canvas animation, a Lottie file, a spreadsheet. It lists the progress at 0%, 10% and so on through the duration, solved from the curve rather than approximated.
Does it work for animation as well as transition?
Yes. The same four numbers go into animation-timing-function, which the transition output includes for exactly that reason. In a keyframe animation the timing function applies between each pair of keyframes, not across the whole sequence.