The CSS Cubic Bezier Generator outputs only the transition-timing-function value — it does not generate a complete transition shorthand. When you click Copy CSS, the clipboard receives a single declaration such as transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); with its trailing semicolon, and nothing else. The tool deliberately omits the animated property, the duration, the delay, the iteration count, and every other part of the CSS transition machinery because those choices depend on the component you are actually styling. A 200-millisecond color fade on a button, a 900-millisecond transform on a drawer, and a 2-second opacity crossfade each need a different surrounding declaration. By isolating the timing function, the generator keeps its output predictable, auditable, and easy to compare against the standardized keyword mappings from W3C CSS Easing Functions Level 1. You receive exactly the four numeric control coordinates that define the easing curve, formatted as a valid CSS value, ready to drop into your own transition rule.
What the Tool Actually Produces
The Copy CSS button writes a complete transition-timing-function declaration, including the property name, the parentheses, the four comma-separated control coordinates, and the terminating semicolon. No keyframes, no linear() stop list, no steps() function, no duration, and no transition shorthand are emitted. If your browser refuses clipboard access, the declaration stays on screen as selectable text and the status does not falsely claim success, so you can still copy it manually. Every coordinate is rounded to three decimal places during serialization, which is why you may see 0.412 where the internal computation produced something like 0.4117; the solver itself keeps full JavaScript numeric precision, so the visible result is a presentational choice rather than a rounding of the curve.
Choosing one of the five CSS easing keyword buttons (linear, ease, ease-in, ease-out, ease-in-out) does not output the keyword itself. Instead, the interface loads the standardized cubic-bezier equivalents from the CSS Easing Functions Level 1 specification and exposes all four control numbers on screen. That means you can record, diff, and tweak a curve without hidden defaults, and you can compare a custom curve against a keyword by reading the same four-value format.
| CSS keyword | Equivalent cubic-bezier() coordinates | What the tool displays |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 0, 0, 1, 1 |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | 0.25, 0.1, 0.25, 1 |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | 0.42, 0, 1, 1 |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | 0, 0, 0.58, 1 |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | 0.42, 0, 0.58, 1 |
Generate and Copy a Valid Timing Function
- Pick one of the five standard easing presets or type your own x1, y1, x2, and y2 values into the coordinate inputs. The interface constrains x1 and x2 to the closed 0–1 range and accepts finite y values from −10 through 10, matching the validity rules defined by the W3C CSS Easing Functions Level 1 specification.
- Read the graph, the five input-to-output samples, and the Run preview to confirm the timing matches your intent. The samples are at input progress 0, 0.25, 0.5, 0.75, and 1; for each one the solver finds the curve parameter whose x coordinate matches the input before evaluating y, so the 50% row is not simply the curve value at t = 0.5.
- Click Copy CSS. The clipboard now holds the full transition-timing-function declaration with its semicolon, ready to paste into your stylesheet.
- Apply the declaration to a real element using the actual property, distance, and duration you intend to ship, then watch the motion in the final interface rather than relying on the in-tool preview alone.
Assembling the Rest of the Transition Yourself
Because the generator hands you only the timing function, you still need to wrap it in a working transition rule. The most common pattern is the shorthand:
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
The four slots here are the animated property, the duration, the easing curve produced by the CSS Cubic Bezier Generator, and an optional delay. You can also split these into longhand declarations — transition-property, transition-duration, transition-timing-function, transition-delay — when several elements need different durations but share the same easing curve. If you are animating multiple properties with the same timing, list them comma-separated inside the shorthand. None of those surrounding pieces are inferred from the easing curve, because the curve itself does not know what is moving, how far, or for how long.
For readers who are still getting comfortable with the syntax, the custom easing workflow guide walks through matching a curve to a specific motion design intent.
Reading the Sample Table Correctly
The numeric samples answer a question the curve picture cannot: given a fraction of elapsed time, how far has the animated value actually progressed? CSS timing functions place input progress on the x axis, so elapsed time and curve progress are not the same number once the x control points are no longer at 0.25 and 0.75. The generator handles this with bounded Newton iterations and finishes with bisection when needed, which is the standard way to invert a cubic parametric curve. The result is a table that shows, for example, that at 50% elapsed time the animated value may sit at 73% of its target distance for an aggressive ease-in curve, or only 12% for a slow start. Treat that table as ground truth and the graph as a visual confirmation; do not assume the curve picture alone tells you where a moving element will be at any given moment.
Run Preview: A 900-Millisecond Sanity Check
Clicking Run toggles a circle between two horizontal positions using a 900-millisecond transform transition and the exact generated easing string. Repeated clicks let you watch both forward and reverse motion. The preview demonstrates timing, not production performance, because a real component can feel different when distance, duration, property, rendering cost, input device, or surrounding motion changes. It also does not honor any operating-system reduced-motion preference for you — that decision belongs to the consuming stylesheet. Use the preview to catch curves that feel right at one duration but jarring at another, and to compare two candidate curves side by side before you copy either one.
When a Valid Curve Still Causes Problems
CSS permits curves that are technically valid but visually unpleasant. Large y overshoots can make controls appear to reverse direction, leave their container, or reveal content that was meant to stay clipped. An overshoot is allowed because the y coordinates describe output progress, not input time, and they may sit below zero (anticipation) or above one (overshoot). The chart clips to a stable zero-to-one square so you can compare ordinary timing curves against each other, but a deliberately extreme y value can extend beyond that frame without being clamped. If overshoot matters, trust the numeric samples and the moving element rather than assuming the chart edge represents a hard ceiling.
Validity is not the same as accessibility. A curve that oscillates rapidly can disorient users with vestibular sensitivities, and CSS does not prevent that for you. Keep important state changes understandable without motion, prefer short durations, and respect prefers-reduced-motion where animation is not essential. The MDN cubic-bezier reference lists additional browser-oriented examples and notes on how different engines render these curves.
What You Cannot Get From This Tool
The generator deliberately focuses on one cubic-bezier timing function and nothing else, so its output stays predictable. It does not generate keyframes, spring physics, linear() stop lists, steps() timing, duration, delay, iteration count, or a full transition shorthand. If your design calls for a stepped or spring-style motion, you will need a different tool or hand-written CSS. Treating the generator as a single-purpose easing designer rather than a full transition builder is what keeps each declaration something you can read, audit, and reason about without hidden defaults.
For a deeper look, see Does the Generated CSS Toggle Switch Code Save a Setting?.