The CSS Cubic Bézier Editor builds valid cubic-bezier(x1, y1, x2, y2) timing functions and previews their motion against a reference curve. Drag the two controls in the editor or enter exact coordinates, then copy the CSS declaration, save variants locally, or share the current curve in a URL.
Reading a timing curve
A CSS timing function is a parametric cubic Bézier curve from (0, 0) to (1, 1). The horizontal coordinate is elapsed time and the vertical coordinate is animation progress. CSS requires both control-point x coordinates to remain between zero and one, which makes time monotone. The y coordinates may leave that interval, allowing anticipation below zero or overshoot above one.
At a given time fraction, the browser first finds the curve parameter whose x coordinate equals that time and then reads the corresponding y coordinate. Evaluating y with the time fraction directly is only correct for special curves. The preview uses the same inversion, so strongly asymmetric curves remain faithful to browser timing.
Solving the Timing Function
For control points \((x_1,y_1)\) and \((x_2,y_2)\), the horizontal component is
\[ x(t)=3(1-t)^2t\,x_1+3(1-t)t^2\,x_2+t^3. \]Given an elapsed-time fraction \(x_{\mathrm{time}}\), evaluation means solving \(x(t)-x_{\mathrm{time}}=0\) for \(t\), then returning \(y(t)\). The derivative used by Newton's method is
\[ x'(t)=3x_1(1-t)^2+6(x_2-x_1)(1-t)t+3(1-x_2)t^2. \]Newton iteration is normally fast, but a nearly horizontal derivative can make its next step unreliable. The evaluator therefore tries at most eight Newton steps and switches to bisection whenever the derivative is too small or a step would leave \([0,1]\). Since valid CSS x coordinates make \(x(t)\) nondecreasing, bisection keeps the solution bracketed and converges reliably even for flat endpoints.
The optional fifth constructor argument sets the tolerated horizontal inversion error. The default is \(10^{-8}\). For a display-only animation of duration \(D\) seconds on a refresh rate \(f\), an upper bound of \(\varepsilon_x=1/(4fD)\) keeps the resulting time error below roughly one quarter of a frame; computations that compare values should use the tighter default.
Using the editor
- Drag either control point; horizontal movement is constrained to the valid CSS interval.
- Use the coordinate fields for exact values, including y values outside the visible unit square.
- Choose a preset as a starting point and select a separate reference for the motion comparison.
- Save useful curves in this browser, export them as JSON, or import a previously exported curve.
- Copy Link writes a shareable URL containing the current four coordinates.
The reusable numerical evaluator behind the preview is kept separate from the interface, while the plotted path uses Bezier.js for Bézier geometry.