Skip to content
Lizely

CSS Cubic Bezier Generator

Design a valid CSS cubic-bezier easing curve and copy its exact timing-function declaration.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a standard easing preset or enter x1, y1, x2, and y2 control coordinates.
  2. 2.Review the graph, numeric progress samples, and Run preview motion for the intended timing.
  3. 3.Copy the complete CSS declaration and test it on the real property, distance, and duration.

About CSS Cubic Bezier Generator

CSS Cubic Bezier Generator turns four control coordinates into a standards-compatible CSS timing function. Adjust x1, y1, x2, and y2 or start with one of the five CSS easing keywords. The result updates immediately as a graph, an exact transition-timing-function declaration, five input-to-output samples, and a moving preview. All calculation happens in the browser. No curve, CSS, or interaction data is uploaded, stored, or sent to an animation service.

A CSS cubic Bézier easing always begins at progress point zero, zero and ends at one, one. The four editable numbers define the two intermediate control points. The x coordinates describe input-time positions, so CSS requires x1 and x2 to remain between zero and one. The y coordinates describe output progress and may go below zero or above one, which can create anticipation or overshoot. The interface constrains x inputs to the valid CSS range and accepts finite y values from minus ten through ten. The pure calculation independently validates those constraints before producing output.

The keyword buttons use the control points defined by CSS Easing Functions Level 1. Linear maps to zero, zero, one, one. Ease, ease-in, ease-out, and ease-in-out load their standardized cubic-bezier equivalents. Choosing a keyword does not output the keyword itself: the visible declaration always exposes all four numbers so it can be recorded, compared, and modified without hidden defaults. Numbers are rounded to three decimal places only when serialized; calculation retains full JavaScript numeric precision.

The table answers a question the control-point diagram alone cannot: how far has the animated value progressed when a given fraction of time has passed? For each input at zero, 0.25, 0.5, 0.75, and one, the solver finds the curve parameter that produces the requested x coordinate and then evaluates y. It first uses bounded Newton iterations and finishes with bisection when necessary. This avoids the common mistake of treating the curve parameter as elapsed time even when the x control points make those values different.

The square chart plots the parametric curve from the fixed start to the fixed end. Standard curves stay within the chart. A deliberately extreme y value can extend outside the visible square because the chart keeps a stable zero-to-one frame for comparing ordinary timing curves. The sample table and animated preview still use the actual computed easing. If overshoot matters, inspect the moving element and the numeric samples rather than assuming a clipped chart means the value was clamped.

Run preview toggles a circle between two horizontal positions using a 900 millisecond transform transition and the exact generated easing string. Repeated clicks let you compare forward and reverse motion. The preview demonstrates timing, not production performance under every workload. A real component can feel different when distance, duration, property, rendering cost, input device, or surrounding motion changes. Test the declaration in its final interface and respect reduced-motion preferences where animation is not essential.

Copy CSS requests clipboard permission and writes the complete declaration, including its semicolon. If browser policy denies access, the declaration remains visible and selectable and the status does not claim success. The tool does not generate keyframes, spring physics, linear() stop lists, steps(), duration, delay, iteration count, or a full transition shorthand. It focuses on one cubic-bezier timing function so the output stays predictable and easy to audit.

CSS permits curves that are technically valid but unpleasant or confusing. Large overshoots can make controls appear to reverse, leave their container, or reveal content that was expected to remain clipped. A valid curve is not automatically accessible, performant, or appropriate. Keep important state changes understandable without motion, avoid rapid oscillation, and check focus and pointer behavior while an element is transitioning. W3C CSS Easing Functions Level 1 is the primary source for the syntax, validity rule, and keyword mappings. MDN independently documents cubic-bezier behavior and browser-oriented examples. The mappings and invalid x boundaries are preserved as executable external golden cases rather than being accepted from memory.

Methodology & sources

Validate CSS x-coordinate limits, retain finite y overshoot, solve input progress with Newton iterations plus bounded bisection, serialize to three decimals, and expose standard keyword mappings as tested reference data.

Frequently asked questions

Why must x1 and x2 stay between zero and one?
They represent input-time positions. CSS defines a cubic-bezier value as invalid when either x control coordinate lies outside the closed zero-to-one range.
Can y1 or y2 be negative or greater than one?
Yes. Valid y control values may produce anticipation below zero or overshoot above one, although extreme motion should be tested carefully.
Why is the sample at 50 percent not always the curve value at t equals 0.5?
CSS timing uses elapsed input progress on the x axis, so the solver must find the parameter whose x coordinate is 0.5 before evaluating y.
Does the generator create a complete transition?
No. It outputs only transition-timing-function; you still choose the animated property, duration, delay, and reduced-motion behavior.

Related tools

Color Tools guides

View all