utilyfe

Cubic Bezier Editor

Drag the two handles, watch the motion, copy the cubic-bezier() when it feels right.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

x1: 0.25y1: 0.1x2: 0.25y2: 1
Presets
Preview
Also try:Regex TesterJSON FormatterColor Contrast Checker

How to use the Cubic Bezier Editor

  1. 1Drag either round handle to bend the curve. The line from each corner shows which handle controls which end of the animation.
  2. 2Press Play to watch a ball move on that curve, so you can judge the feel rather than just the shape.
  3. 3Start from a preset if you want a known easing to tweak, or paste a cubic-bezier() value (or a whole transition line that contains one) straight into the box.
  4. 4No mouse? Tab to a handle and use the arrow keys to move it (hold Shift for bigger steps).
  5. 5Press Copy to take the CSS value.

Reading the graph

The horizontal axis is time through the animation, from start (left) to end (right). The vertical axis is progress: how far through the animation’s actual change you are. A straight diagonal line would be linear: equal progress for equal time.

Each handle pulls the curve near one end. The first handle (linked by a dashed line to the bottom-left corner) shapes how the animation begins; the second handle (linked to the top-right corner) shapes how it ends. Pull a handle up and away from its corner and that part of the animation moves faster than linear; push it down and it moves slower.

The shaded band is where progress stays between 0 and 1: a normal animation without overshoot. A handle placed outside the band is what produces a curve that overshoots and comes back, which is exactly the “back” family of presets.

The four numbers

A CSS cubic-bezier(x1, y1, x2, y2) value is nothing but those two handle positions. The curve’s own start and end, (0,0) and (1,1), are fixed by definition and never appear in the four numbers.

.card {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

x1 and x2 must stay between 0 and 1. A timing function has to return exactly one progress value for every moment in time, and letting x run backwards or past 1 would break that: CSS itself rejects a cubic-bezier() with x outside that range.

y1 and y2 have no such limit. Progress is free to overshoot past 1 or dip below 0, and that’s the whole mechanism behind a “pop” or “bounce” style animation: the element runs past its target and eases back.

The named keywords, decoded

CSS’s built-in easing words are just cubic-bezier curves with specific numbers:

Keyword Same as
ease cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in cubic-bezier(0.42, 0, 1, 1)
ease-out cubic-bezier(0, 0, 0.58, 1)
ease-in-out cubic-bezier(0.42, 0, 0.58, 1)
linear cubic-bezier(0, 0, 1, 1)

Starting from one of these and nudging a handle is usually faster than building a curve from nothing: the presets above load each one so you can feel the difference a small drag makes.

Why the preview matters more than the shape

Two curves that look similar on the graph can feel completely different in motion: a slight difference in the first handle changes how “snappy” the start feels in a way that’s hard to judge from the line alone. Press Play and watch the ball before deciding a curve is right; the graph tells you the shape, the preview tells you the feel. The track is as wide as the whole motion, overshoot included, with a marker where the animation starts and ends, so a “back” curve visibly runs past the end marker and returns without leaving the track.

Questions

What do the four numbers actually mean?
They're two control points, (x1,y1) and (x2,y2). The curve always starts at (0,0) and ends at (1,1): those aren't part of the four numbers because they never change. x is time through the animation, y is how far through the animation's motion you are at that time; when y runs ahead of x the animation is moving faster than linear, and when it lags behind, slower.
Why can y go above 1 or below 0, but x can't?
x has to stay within 0 to 1 because it represents time, and a timing function must give exactly one answer for every moment: CSS rejects an out-of-range x for that reason. y has no such rule: a y handle above 1 or below 0 is what makes an animation overshoot past its target and settle back, the "back" family of easings.
Is this the same curve browsers actually use?
Yes. This solves the same cubic bezier equation CSS itself uses for cubic-bezier() and for the built-in keywords (ease, ease-in-out and so on are shorthand for specific control points), so what you preview here is what will play in the browser.
Can I use this for JavaScript animations too?
The curve itself is just maths, so yes: most animation libraries (Framer Motion, GSAP, animation timing in the Web Animations API) accept the same four numbers as a cubic bezier easing. Copy the numbers rather than the CSS wrapper if the library wants them plain.
What can I paste into the box?
A cubic-bezier() value written any way CSS allows it: with or without leading zeros (.25 or 0.25), with a plus sign, with a trailing semicolon or spaces before the bracket. You can also paste the whole line: transition-timing-function: cubic-bezier(.25, .1, .25, 1); or a transition shorthand like transition: opacity 1s cubic-bezier(.1, .2, .3, .4) .5s, and it picks the curve out. Four bare numbers and the keywords ease, ease-in, ease-out, ease-in-out and linear work too. Anything that isn't a plain number, such as Infinity, is refused with a message naming it.
Why did the graph change scale when I moved a handle far up or down?
The graph always shows enough vertical room for both handles, so a handle can never end up off the edge where it couldn't be grabbed again. It starts at −0.75 to 1.75, which fits every preset including the overshoot ones, and widens when a curve needs more. While you hold a handle the scale stays put so the graph doesn't shift under your pointer, and it settles once you let go.
Can I move the handles without a mouse?
Yes. Tab to a handle and use the arrow keys: 0.01 per press, or 0.1 with Shift held. The value in the box and the curve update together.
Is anything sent anywhere?
No. The curve, the preview and the maths all run in this browser tab. Nothing is uploaded, logged or saved.