What is a cubic-bezier() easing function?

In CSS, cubic-bezier() defines how an animation or transition accelerates over time. It is a curve through four points — a fixed start at (0,0), a fixed end at (1,1) and two control handles you move. The x-axis is progress through the animation and the y-axis is the eased output, so the shape of the curve decides whether motion eases in, eases out, snaps or overshoots.

Why must x1 and x2 stay between 0 and 1?

The horizontal axis is time, which only ever moves forward. If a handle x-value left the 0–1 range the curve would fold back on itself and stop being a valid timing function, so the editor clamps the handle x to that range. The y-values are free to go above 1 or below 0, which is exactly how overshoot curves like ease-out-back are made.

How do I get a bounce or overshoot effect?

Drag a handle above the top gridline (y greater than 1) or below the bottom one (y less than 0). The eased value briefly passes its target and springs back, which reads as a bounce. The built-in ease-out-back, ease-in-out-back and anticipate presets are good starting points to tweak.

What does the scrubber read-off tell me?

It solves the curve for a given progress percentage and shows the eased output percentage. At 50 percent progress a linear curve outputs 50 percent, but an ease-out curve might already be at 80 percent — useful when you are timing a second animation to start when the first is visually most of the way done.

When would I export @keyframes instead of a single cubic-bezier value?

Some properties cannot be eased with a timing function alone, or you may need the easing baked into a keyframe animation for a specific engine. The export samples your curve into percentage stops so the motion is reproduced as a keyframe animation you can paste directly into a stylesheet.

Is anything uploaded when I use this editor?

No. The curve maths, preview, comparison and exports all run locally in your browser using plain JavaScript and SVG. Saved curves are kept in your browser localStorage only and never leave your device.

Cubic Bezier Easing Editor

A hands-on cubic-bezier easing editor for CSS animation work. You drag the two control handles directly on the curve, watch a live preview, and copy a ready-to-paste cubic-bezier() value — but it goes further than a basic generator: it lets you scrub the timeline to read the exact eased value at any progress point, compare your curve against a reference, save curves you like, and export a full @keyframes block when a single timing function is not enough.

It is built for front-end developers, motion designers and anyone fine-tuning the feel of a transition. Easing is what separates motion that feels mechanical from motion that feels intentional, and the only reliable way to nail it is to see the curve, the numbers and the animation side by side — which is exactly what this tool puts in one place.

How it works

A CSS timing function is a Bezier curve with a fixed start at the origin and a fixed end at the top-right. Only the two control handles move. The horizontal axis is progress through the animation (always 0 to 1, because time only moves forward), and the vertical axis is the eased output — which is free to overshoot above 1 or dip below 0 to create bounce and anticipation.

When you drag a handle, the editor re-solves the curve. Because the curve is defined parametrically, finding the eased value y for a given progress x is not a direct lookup — the tool runs a few Newton-Raphson iterations (with a bisection fallback) to invert x(t), then evaluates y(t). That same solver powers the live preview, the scrub read-off and the keyframe export, so every number you see is the true curve value, not an approximation of the handle position.

The preview animates a real DOM element using your generated cubic-bezier() so what you see is precisely what a browser will render. Set a reference curve (a preset or one of your saved curves) and it is drawn as a dashed line behind yours, making it easy to judge whether your tweak is subtler, snappier or more dramatic than a known easing.

Example

Say you want a panel that slides in with a slight overshoot. Start from the ease-out-back preset, which gives roughly cubic-bezier(0.34, 1.56, 0.64, 1). The second handle sits well above the top gridline, so the value shoots past 100 percent before settling — that is the overshoot.

Scrub to 60 percent progress and the read-off shows the element is already past its final position; nudge the first handle right to delay the start, and the motion feels like it gathers momentum before springing into place. Happy with it? Copy the value, or grab the generated rule:

transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

If you need the easing on a property a timing function cannot touch, open Export as @keyframes and paste the sampled animation instead. Every curve, preview and export is computed in your browser — nothing is uploaded.