A cubic-bezier() easing function is defined by exactly four control coordinates — x1, y1, x2, and y2 — that describe how a CSS animation accelerates and decelerates over time, and a dedicated generator turns those four numbers into a valid transition-timing-function declaration you can paste into any stylesheet. The challenge is rarely the syntax. The challenge is choosing numbers that produce the feeling you want, keep x inside CSS validity rules, and behave correctly inside a real component. CSS requires both x1 and x2 to sit between zero and one because they describe input-time positions, while the y values describe output progress and may dip below zero or rise above one to create anticipation or overshoot. Without a visible curve, a sample table, and a running preview, most developers end up guessing four numbers, pasting them into DevTools, and reloading after every tweak. The CSS Cubic Bezier Generator collapses that loop into a single screen: pick a preset, edit the coordinates, watch the preview, copy the declaration.
Anatomy of a Cubic Bezier Easing Function
The CSS cubic-bezier(x1, y1, x2, y2) function describes a parametric curve that always starts at the point (0, 0) and ends at (1, 1). The four numbers you supply are the two intermediate control points, and they shape how the line bends between those anchors. The horizontal axis represents elapsed input progress — that is, how much of the animation duration has passed. The vertical axis represents output progress, or how far the animated value has actually moved.
Because x describes time, CSS enforces a hard rule, documented in the W3C CSS Easing Functions Level 1 specification: both x1 and x2 must remain inside the closed range zero to one. An x value outside that range makes the easing invalid and the browser falls back to the default keyword. The y values face no such clamp inside the generator. y1 or y2 can be negative, producing anticipation where the value briefly moves backward before settling, or greater than one, producing overshoot where the value travels past the target and then settles back. Both behaviors are technically valid CSS but each one changes what the animation looks like in a way that warrants testing in the final interface.
The standard CSS easing keywords are not separate syntax — each one resolves to a specific set of four coordinates defined by the W3C specification. That means a hand-written declaration like cubic-bezier(0.25, 0.1, 0.25, 1) is exactly equivalent to the keyword ease, with identical timing on every conforming browser, and MDN documents the same mappings as a cross-reference.
Why the Sample at 50% Is Not Always the Curve at t = 0.5
The shape the generator draws is a parametric curve plotted against its own parameter t, which runs from zero to one independently of animation time. Input progress, however, runs along the x axis. When x1 and x2 are not symmetric, those two axes no longer line up — and that mismatch is the source of the most common confusion when reading a cubic-bezier graph.
To produce the sample table, the generator solves a real numerical problem: for each requested x — 0, 0.25, 0.5, 0.75, and 1 — it finds the parameter t whose x coordinate equals the requested value, then evaluates y at that t. The solver uses bounded Newton iterations and falls back to bisection when the Newton step would step outside the valid range. That matters because reading y directly at t equals 0.5 only gives the correct answer when the curve happens to cross x equals 0.5 at that t, which is true for symmetric curves like ease-in-out but not for skewed curves like ease-in or ease-out.
For a concrete anchor, consider the linear preset. Its control points are (0, 0) and (1, 1), and the curve parameter t equals input progress everywhere along the curve. So at x equals 0.25, y equals 0.25; at x equals 0.5, y equals 0.5; at x equals 0.75, y equals 0.75. That is the one case where the diagram and the sample table agree line by line, and it makes linear a useful baseline for spotting when another curve is doing something non-obvious.
Generate and Copy a Declaration in Three Steps
- Choose a starting point. Click one of the five CSS easing keyword buttons — linear, ease, ease-in, ease-out, or ease-in-out — to load its standardized coordinates, or type your own x1, y1, x2, and y2 values directly into the four input fields. The generator constrains x inputs to the valid zero-to-one range and accepts finite y values from minus ten through ten.
- Read the graph, the table, and the preview. Watch how the parametric curve reshapes as you change any value. Inspect the five input-to-output samples to see how far the animated value has progressed at 0, 25, 50, 75, and 100 percent of elapsed time. Toggle the Run preview to watch a circle slide between two positions over 900 milliseconds using the exact easing string, and click repeatedly to compare forward and reverse motion.
- Copy the declaration and test it in context. Use Copy CSS to place the complete transition-timing-function value, including its trailing semicolon, on the clipboard. Paste it onto the real property in the real component — adjust duration, delay, distance, and any reduced-motion fallback as needed before shipping.
The Five CSS Easing Keywords and Their Coordinates
The five keyword buttons in the generator load the exact coordinates defined by the W3C CSS Easing Functions Level 1 specification. Selecting a keyword does not output the keyword itself — the visible declaration always exposes all four numbers so you can record, compare, and modify them without hidden defaults.
| Keyword | x1 | y1 | x2 | y2 | Typical feel |
|---|---|---|---|---|---|
| linear | 0 | 0 | 1 | 1 | Constant speed, mechanical |
| ease | 0.25 | 0.1 | 0.25 | 1 | Gentle start, soft landing |
| ease-in | 0.42 | 0 | 1 | 1 | Slow start, fast finish |
| ease-out | 0 | 0 | 0.58 | 1 | Fast start, slow finish |
| ease-in-out | 0.42 | 0 | 0.58 | 1 | Symmetric acceleration |
Numbers are rounded to three decimal places only when the declaration is serialized for display or copy; the calculation itself retains full JavaScript numeric precision, so two coordinate sets that differ in the fourth decimal place will behave identically in the browser.
What the Tool Does Not Generate
The generator deliberately focuses on a single decision: the four coordinates of one cubic-bezier timing function. It does not produce keyframes, spring physics, linear() stop lists, steps() jumps, duration, delay, iteration count, or a full transition shorthand. Each of those is a separate authoring concern with its own trade-offs.
That scope keeps the output predictable and easy to audit. You always see exactly which four numbers you are about to ship, and you always know which surrounding CSS rules you still need to write. For long-running or staged animations, a keyframe sequence is often a better fit than a single easing curve; for stepped motion like a slot-machine tick, steps() is the right tool. Cubic-bezier is the right tool when you want a single continuous timing feel between two states.
Animation Behavior Beyond the Numbers
A technically valid curve can still produce motion that is unpleasant, confusing, or inaccessible. Large overshoots can make a control appear to reverse direction, leave its container, or reveal content that was meant to stay clipped. Rapid oscillation between negative and positive y values can trigger vestibular discomfort for some viewers. Focus and pointer behavior while an element is mid-transition can also change in subtle ways that the generator cannot show you.
The 900-millisecond preview demonstrates timing, not production performance. A real component can feel different when distance, duration, property, rendering cost, input device, or surrounding motion changes — so test the declaration in its final interface and respect prefers-reduced-motion for animation that is not essential. Keep important state changes understandable without motion, and avoid curves whose only purpose is visual flourish.
If the copy button is denied by browser policy, the declaration remains visible and selectable in the input area and the status text does not claim success, so you always know whether the value on your clipboard came from the tool or from a manual selection. All calculation happens in the browser, and no curve, CSS, or interaction data is uploaded, stored, or sent to an animation service. When you are ready to validate the output against the actual animation rather than the static curve, the result-checking workflow walks through that final step in more depth.
For a deeper look, see Troubleshoot Problems When You Generate a CSS Toggle Switch.