CSS cubic-bezier() Generator
Drag the two control points to shape an easing curve, load the standard presets, feel the motion in a live animation, and copy the exact cubic-bezier() value. Everything runs in your browser.
x must stay in 0–1 — it is the time axis and browsers reject an out-of-range x. y may go below 0 or above 1 for anticipation and overshoot ("back") curves; drag a handle above the box to make the motion spring past its target.
Nothing you build is uploaded. The curve, the preview and the CSS string are computed on your own device with plain JavaScript — no network calls, and the page keeps working offline.
What a cubic-bezier() curve actually describes
A CSS easing function maps the progress of time through an animation onto the progress of the value being animated. Both run from 0 to 1: at time 0 the property is at its start, at time 1 it has reached its target, and the curve says how it gets between them. cubic-bezier() defines that mapping as a cubic Bezier curve whose two endpoints are pinned at (0,0) and (1,1), leaving two control points free to bend the path. Those four free numbers are exactly what cubic-bezier(x1, y1, x2, y2) holds: the coordinates of the first and second control points. Where the curve is steep the property is moving fast; where it is shallow, slow. A perfectly straight diagonal — cubic-bezier(0, 0, 1, 1), the linear keyword — moves at one constant speed the whole way.
Why x is fenced to 0–1 and y is not
The horizontal axis is time, and time only moves forward. If a control point's x slipped below 0 or above 1 the curve could fold back on itself and hand you two output values for the same instant, which is meaningless — so the specification constrains x1 and x2 to the [0,1] range and a browser will refuse a value outside it. This tool enforces the same fence: the two handles cannot leave the vertical band of the unit square, and typing 1.4 into an x field snaps it back to 1.
The vertical axis is the value's progress, and it is deliberately not fenced. Pushing a control point's y above 1 makes the property overshoot its destination and settle back — the springy "back-out" you see when a modal pops in a touch too far and relaxes. Pulling y below 0 makes it wind up in the opposite direction first, the "anticipation" a character animator adds before a jump. Drag a handle above the top edge of the box here and the live dot springs past the end and returns.
The keyword easings, exactly
The named CSS timing keywords are just familiar cubic-bezier() curves. It helps to know their numbers when you want to start from one and tweak:
| Keyword | cubic-bezier() | Feel |
|---|---|---|
| linear | 0, 0, 1, 1 | constant speed, no ramp |
| ease | 0.25, 0.1, 0.25, 1 | the default — quick start, long glide out |
| ease-in | 0.42, 0, 1, 1 | slow start, accelerates to full speed |
| ease-out | 0, 0, 0.58, 1 | starts fast, brakes to a stop |
| ease-in-out | 0.42, 0, 0.58, 1 | slow at both ends, fast in the middle |
A useful instinct: for something arriving on screen (a menu opening, a toast sliding in) ease-out usually feels best, because it decelerates into place the way a real object would. For something leaving, ease-in reads as it gathering speed to exit. ease-in-out suits a move between two on-screen positions. Plain linear is right for continuous motion like a spinner or a marquee, where any ramp would look like a stutter.
Using the value
The generator emits both the bare function and a ready-to-paste line. Drop the function into a transition:
.card {
transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}The same value is a valid animation-timing-function too. One caveat worth knowing: on a keyframe @keyframes animation the timing function applies to each segment between keyframes, not the whole run, so with several percentage stops the easing restarts at each one. To get exactly the shape you drew here, use it on a simple two-stop (from/to) animation or on a transition.
Reading the graph
The dashed diagonal is the linear reference. When your curve bows below that diagonal early on, the value is lagging behind time — a slow start (ease-in behaviour). When it bows above, the value is ahead of time — a fast start that trails off (ease-out). The steeper the curve at any point, the faster the property is changing there; a nearly flat stretch is a pause. The two straight tethers from each endpoint to its control point show the direction the curve leaves the start and enters the end: a longer tether pulls harder, which is how you build a pronounced ramp.
Honest limits
A cubic Bezier has only two control points, so it cannot describe motion that changes direction more than the shape allows — a true multi-bounce or a decaying spring needs several segments or a physics-based linear() easing (a newer CSS function that lists many points), which this tool does not generate. The rounding here is fixed at two decimals, which matches how browsers and design tools quote these values and is far finer than the eye can resolve in motion; if you need more precision, edit the copied string by hand. And an overshoot curve only looks like a bounce on a property that can exceed its target, such as a transform; on a clamped property like opacity the over-range portion is pinned and the effect is lost — see the FAQ above. For the colours and shapes you animate, pair this with the Gradient Generator, the Box-Shadow Generator, the Border-Radius Generator and the Color Converter.