Advertisement
Guide
About the cubic-bezier Easing Editor
Easing is what makes animation feel natural. A linear animation moves at a constant speed and looks robotic; real motion accelerates and decelerates. In CSS, you describe that with a timing function, and cubic-bezier() lets you define your own curve using two control points. This editor lets you drag those points, watch a live preview, and copy the exact value into your stylesheet.
The curve maps time (left to right) to progress (bottom to top). Presets give you the built-in easings as starting points, and you can pull the handles past the edges to create bouncy overshoot effects.
How to read the curve
The horizontal axis is time and the vertical axis is how far the animation has progressed. A steep section means fast motion; a flat section means slow motion. The green handle controls how the animation starts and the red handle controls how it ends — dragging the start handle low and flat produces an ease-in, while a high, flat end handle produces an ease-out.
Overshoot and bounce
Pulling a handle above the top or below the bottom of the box gives the curve a value beyond 0–1, which makes the animated element overshoot its target and settle back — the basis of playful, springy motion. Use it sparingly for emphasis, like a button or modal that pops in, and keep interface-critical transitions smoother.
How to use it
- 1Drag the green and red handles to shape the curve.
- 2Watch the preview ball to feel the timing.
- 3Start from a preset if you want a familiar easing.
- 4Copy the cubic-bezier() value into your CSS transition or animation.
Frequently asked questions
What is cubic-bezier in CSS?
It is a timing function that defines a custom easing curve from two control points, written as cubic-bezier(x1, y1, x2, y2). It controls how an animation speeds up and slows down over its duration.
How do I make an ease-in or ease-out?
For ease-in, keep the start slow (drag the first handle low and to the right); for ease-out, keep the end slow (drag the second handle high and to the left). The presets show exact values.
Can I create a bounce or overshoot effect?
Yes. Drag a handle above or below the box so the y value goes beyond 0–1. The element then overshoots its end point and settles, producing a springy feel.
Where do I use the value?
Paste it into transition-timing-function or animation-timing-function, for example: transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1).
How do I use the curve in JavaScript?
The Web Animations API takes the cubic-bezier() string as its easing option. Framer Motion and GSAP’s CustomEase take the four numbers, which the tool gives as an array.
Is anything uploaded?
No. The editor and preview run entirely in your browser.