Cubic-bezier generator
Craft a CSS animation easing curve by dragging the handles, with an animated preview.
- Instant
- Free
- Private (processed locally)
- No sign-up
Draw your animation curve
Drag the two handles on the graph to shape the easing, watch the animated ball reproduce the motion, then copy the cubic-bezier() value for your CSS.
-
Start from a preset
ease, ease-in-out, linear…
-
Adjust the handles
X = time (0–1), Y free for bounce.
-
Copy the CSS
Paste into transition or animation.
The CSS presets
| Name | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X is clamped to [0,1], Y can overshoot for bounces. Preview via the Web Animations API, everything stays local.
Frequently asked questions
What is a cubic-bezier curve?
It is the timing function describing how an animation speeds up and slows down. It is defined by two control points (x1, y1, x2, y2). In CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Why can Y values exceed 1?
X stays between 0 and 1 (time), but Y can leave [0,1] to create a bounce or overshoot effect (the element goes further then comes back). That is how you get “back” and elastic curves.
How do I use it in my CSS?
Paste the value into transition: all 0.3s cubic-bezier(…) or into animation-timing-function. The animated preview shows the real result before you paste.
What are the standard presets?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Start from a preset then adjust the handles.