Cubic bezier generator
Build cubic-bezier easing curves by dragging control points or typing numbers: live animation preview, validity and overshoot checks, plus CSS transition-timing-function and SVG output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Control points
Drag the two circles on the curve to move the control points
x must stay within 0–1; y can be any number (values outside 0–1 overshoot)
Animation preview
CSS output
.example {
transition-timing-function: ease;
transition: transform 0.4s ease;
animation-timing-function: ease;
}Keyword: ease
What this tool does
- When you want a bouncy or slow-in-fast-out feel, drag the two control points and watch the live animation instead of editing numbers blindly.
- Paste a cubic-bezier(…) string from a designer to see the curve shape, whether it overshoots, and which CSS keyword it matches.
- Check whether a curve is exactly linear, ease, ease-in, ease-out or ease-in-out — when it is, the output uses the keyword and stays short.
- Spot overshoot: a y value outside 0–1 is flagged as a possible source of visual jitter, so you can confirm it is intentional before shipping.
Example
Input
cubic-bezier(0.34, 1.56, 0.64, 1)
Output
.example {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}The y value 1.56 is outside 0–1, so the tool also flags this as an overshooting (bounce) curve; cubic-bezier(0.42, 0, 0.58, 1) instead collapses to the keyword ease-in-out.
Frequently asked questions
How do the ranges for x and y differ?
x1 and x2 must stay within 0–1 and anything else is reported as an invalid curve, because time cannot run backwards. y1 and y2 may be any number: outside 0–1 it is an overshoot (bounce), which the tool flags without stopping you.
Why was my curve replaced by a keyword?
When the four values exactly match a CSS keyword (linear, ease, ease-in, ease-out, ease-in-out) the output prefers the keyword, since it is identical but shorter. Nudge any decimal slightly to force the numeric form.
Which input formats can be parsed?
cubic-bezier(0.25, 0.1, 0.25, 1), 0.25, 0.1, 0.25, 1 and 0.25 0.1 0.25 1 are all accepted, with commas and spaces in any mix — but there must be exactly four numbers, otherwise you get "enter a valid cubic-bezier".
What is the problem with overshooting curves?
A y value beyond 0–1 makes the animation pass the end point and bounce back. That reads as lively, but it can shake text, spill out of a container or clash with other animations. The tool only warns; the decision is yours.
Is the curve preview really computed?
Yes. The tool solves for the parameter t that matches a given x using Newton iteration with a bisection fallback, then evaluates y — the same way browsers evaluate CSS easing. Every row of the sample table comes from that, not from interpolation.
Keywords：cubic-bezierbezier贝塞尔easing缓动transition-timing-functionanimation动画csstiming function缓动函数