A CSS cubic-bezier easing curve is fully described by exactly four numbers — x1, y1, x2, and y2 — because every cubic-bezier curve in CSS always starts at the progress point (0, 0) and always ends at (1, 1). To repeat the same result when you generate a CSS cubic bezier, you only need to keep those four numbers stable across sessions, projects, and team members; the starting anchor and ending anchor are already locked in by the CSS specification. The CSS Cubic Bezier Generator supports this directly by exposing all four control coordinates in the visible declaration rather than hiding them behind a keyword label, by rounding output numbers to three decimal places only at the moment of serialization, and by letting you re-load any of the five standardized CSS easing keywords on demand. Because all calculation happens in the browser using bounded Newton iterations plus bisection, the same four inputs always resolve to the same sampled progress values, which is what makes a copied declaration visually repeatable.
What "Repeat the Same Result" Means for a Cubic Bezier
In the context of CSS animation, "repeating the same result" means producing an identical timing-function string that the browser will resolve to the same parametric curve, and therefore the same progress at each fraction of elapsed time. Because CSS defines a cubic-bezier value as the four control points (0,0), (x1,y1), (x2,y2), (1,1), and the start and end anchors are fixed by the specification, two declarations that share identical x1, y1, x2, and y2 values must produce the same easing regardless of which editor, generator, or hand-typed code produced them. According to the W3C CSS Easing Functions Level 1 specification, the curve is invalid if either x1 or x2 falls outside the closed range from 0 to 1, but the y values are unconstrained beyond being finite numbers, so any reproducibility workflow must respect those two limits while still allowing the y values to drift below 0 or above 1 for anticipation and overshoot effects.
This is why reproducibility for a cubic-bezier is a much smaller problem than reproducibility for a full animation. You are not trying to recreate a keyframed motion, a spring physics model, or a steps() timeline; you are only trying to preserve four numbers. Once those four numbers are preserved, the parametric curve, the sampled progress at every fraction of input time, and the on-screen motion will all line up — provided the same property, distance, and duration are used. The generator narrows its scope to this single decision on purpose: it does not output keyframes, spring physics, linear() stop lists, steps() timing, duration, delay, iteration counts, or a full transition shorthand, which keeps the declaration easy to audit and reproduce.
Three Reproducibility Paths the Generator Supports
The CSS Cubic Bezier Generator offers three dependable routes to a repeated result, and most readers will use more than one.
Standardized preset keywords. The keyword buttons — linear, ease, ease-in, ease-out, ease-in-out — load the exact control points defined by the CSS Easing Functions Level 1 specification. Because those values are standardized, choosing the same keyword on any compliant tool, in any browser, on any day, always reproduces the same curve. The generator stores these mappings as executable reference data rather than relying on memory, so the on-screen numbers are guaranteed to match the specification.
Recorded control numbers. Any custom curve you build is fully captured by its four x1, y1, x2, y2 values. Copy those numbers into a code comment, a design token, or a style guide, and you have everything needed to reproduce the curve months later, even if the generator interface changes. Because the interface constrains x inputs to the valid CSS range and accepts finite y values from minus ten through ten, any number you record is one that the tool will accept on re-entry.
Re-entered values plus the copied declaration. Because the visible declaration always shows all four numbers (never the bare keyword), you can paste an earlier declaration's values back into the input fields to reconstruct the exact curve, or you can paste the full transition-timing-function declaration directly into your stylesheet without further translation. Choosing a keyword never outputs the keyword itself, so the declaration you copied today is the same shape you will paste tomorrow.
Locking In a Result With the CSS Cubic Bezier Generator
- Open the CSS Cubic Bezier Generator and pick the starting point that matches the curve you want to repeat: either click one of the five preset keywords (linear, ease, ease-in, ease-out, ease-in-out) to load standardized control points, or enter the original x1, y1, x2, y2 values directly into the four coordinate fields.
- Check the graph, the five-row numeric sample table, and the Run preview circle against the curve you intend to repeat. The sample table shows output progress at input progress values of 0, 0.25, 0.5, 0.75, and 1, which is the most reliable cross-check because two curves can look similar on a chart but differ at specific time fractions.
- Click Copy CSS to place the complete transition-timing-function declaration on the clipboard, including its trailing semicolon. The serialized numbers are rounded to three decimal places — for example, a calculated y of 0.2499999 becomes 0.250 — which is precise enough that any later reproduction of the same logical curve will serialize to the same string. If the browser denies clipboard access, the declaration remains visible and selectable so you can still capture it manually.
- Paste the declaration into the real CSS rule that animates the intended property at the intended distance and duration, then trigger the transition in the actual interface to confirm the motion matches the original.
- Record the four numbers, the property, the duration, and any reduced-motion fallback in a comment, design token, or shared style guide so that anyone — including future you — can re-enter them and rebuild the curve exactly.
Precision, Rounding, and Why the Output Stays Stable
Behind the scenes, the generator evaluates the cubic-bezier parametric formula at full JavaScript numeric precision, but it rounds to three decimal places only at the moment the declaration is serialized to text. That choice matters for reproducibility: a custom knob position such as y1 = 0.3333333333 will serialize to 0.333, and pasting 0.333 back into the input fields reproduces the same logical curve because the three-decimal representation is precise enough to resolve the curve parameter correctly for every input progress in the sample table. The keyword buttons expose the same logic the other way — clicking ease reveals cubic-bezier(0.25, 0.1, 0.25, 1), and re-entering those four numbers by hand produces an identical declaration.
The table below lists the five standardized keyword mappings, as defined by the W3C CSS Easing Functions Level 1 specification. Each row is a reproducible curve on its own — selecting the keyword, or typing in the four numbers, will produce the same declaration every time.
| Keyword | x1 | y1 | x2 | y2 |
|---|---|---|---|---|
| linear | 0 | 0 | 1 | 1 |
| ease | 0.25 | 0.1 | 0.25 | 1 |
| ease-in | 0.42 | 0 | 1 | 1 |
| ease-out | 0 | 0 | 0.58 | 1 |
| ease-in-out | 0.42 | 0 | 0.58 | 1 |
Because these values are standardized rather than tool-specific, a curve generated here will match the same curve on any compliant CSS engine, which is the strongest form of reproducibility the format allows. Custom curves with extreme y values — for example, y1 = -2 for a strong anticipation pull — are equally reproducible as long as the four numbers are recorded exactly as serialized. Keep in mind that a deliberately extreme y value can extend outside the visible chart square while the sample table and animated preview still use the actual computed easing, so the recorded numbers remain the source of truth.
Test the Reproduced Declaration in Real Conditions
Reproducing the numbers is necessary but not sufficient: the same cubic-bezier can feel different if the surrounding transition parameters change. The generator's animated preview uses a 900 millisecond transform transition between two horizontal positions, which is a useful smoke test for forward and reverse timing, but production motion depends on the property you animate (transform, opacity, color, and filter each interpolate differently), the distance the value travels, the rendering cost on the target device, and any other motion occurring at the same time. When you test a reproduced curve, run the transition at the intended duration, on the intended property, over the intended distance, and compare forward and reverse playback side by side using repeated clicks on the Run preview.
Browser implementation also matters in one narrow way. If you re-enter a curve into a tool that performs the parametric calculation with a different algorithm or tolerance than the one used originally, the sampled progress at intermediate input times can shift slightly. The generator mitigates this by using bounded Newton iterations and finishing with bisection when necessary, matching the approach documented for the cubic-bezier() easing function on MDN, so re-entering the same numbers produces the same sample values.
When Reproduced Motion Still Looks Different
Even with identical numbers, a reproduced curve can produce visibly different motion if the surrounding context changes. A curve with y values outside the 0 to 1 range can create anticipation or overshoot, and overshoot that looks lively on a small toggle can look chaotic on a large modal panel that briefly leaves its container or reveals content that was expected to remain clipped. If the reproduced curve feels different in the new context, the four numbers have not changed — the property, distance, duration, or surrounding motion has. A valid curve is not automatically accessible, performant, or appropriate, so always keep important state changes understandable without motion, avoid rapid oscillation, respect prefers-reduced-motion where animation is not essential, and check focus and pointer behavior while an element is transitioning.
For longer-term reproducibility across a team, document the four numbers together with the property, distance, duration, and any reduced-motion fallback so that the curve and its intended use travel together. The companion guide Document the Steps You Use to Generate a CSS Cubic Bezier walks through a fuller documentation workflow for teams that need audit-ready motion tokens.
If you're weighing options, Repeat the Same Result From a CSS Toggle Switch Generator covers this in detail.