A cubic-bezier easing curve tells CSS how an animation speeds up and slows down over its duration, defined by four numbers that set two control points. The generator below lets you set those four points, draws the resulting curve, and gives you the exact cubic-bezier() value to paste into a transition or animation.
cubic-bezier(x1, y1, x2, y2). The curve always starts at (0,0) and ends at (1,1); the four numbers position two control points that bend the path between them. That bend controls the rate of change, so the same one-second transition can start slow and finish fast, or the reverse. Set the points below and copy the value.What a Cubic Bezier Easing Curve Is
A cubic-bezier easing curve is a timing function. The horizontal axis represents time, from the start of the animation to the end, and the vertical axis represents progress, from the initial value to the final one. A straight diagonal line means time and progress advance together at a constant rate. Bending the line means progress moves faster at some moments and slower at others. The four numbers in cubic-bezier(x1, y1, x2, y2) set the two control points that produce that bend, while the start point (0,0) and end point (1,1) are fixed.
How to Use It
- Set X1 and Y1, the first control point near the start of the animation.
- Set X2 and Y2, the second control point near the end.
- Watch the curve redraw. A curve that rises slowly then steeply means a slow start and fast finish.
- Set a duration in seconds to see the full transition line you can paste.
- Copy the
cubic-bezier()value or the completetransitionline into your stylesheet.
How the Four Control Points Work
The X values must stay between 0 and 1, because time cannot run backward or past the end of the animation. The Y values can go below 0 or above 1, which is what lets a curve overshoot or pull back before settling. A Y2 above 1 makes an element move past its target and snap back, the motion people call a bounce or spring.
The Named Easings vs Custom Curves
CSS ships with keyword timing functions that are shorthand for specific cubic-bezier values. You can use the keyword or the equivalent curve; the result is identical.
| Keyword | Equivalent cubic-bezier | Feel |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | Constant speed |
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) | Default; gentle start and end |
| ease-in | cubic-bezier(0.42, 0, 1, 1) | Slow start, fast finish |
| ease-out | cubic-bezier(0, 0, 0.58, 1) | Fast start, slow finish |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Slow at both ends |
Easing for Good UX
Most interface motion reads better with an ease-out curve, because elements arrive quickly and settle gently, which matches how objects behave when they slow to a stop. Linear motion, by contrast, looks mechanical, since nothing in the physical world starts and stops at a constant speed. Reserve linear for things that genuinely move at a fixed rate, such as a loading spinner or a marquee. For entrances and exits, a curve with a slow finish almost always feels more natural than a straight line.
When to Use It
Reach for a custom cubic-bezier when the built-in keywords do not give you the motion you want, such as a subtle overshoot on a modal, a snappy ease-out on a menu, or a spring on a button press. Pair the value with a transition or an animation declaration and tune the duration alongside the curve, since the same curve feels different at 200 milliseconds than at one second.
Last Thoughts on Cubic Bezier Easing
An easing curve is the difference between motion that feels designed and motion that feels like a value snapping from one state to another. The four numbers look abstract until you see the curve, which is why a generator helps: you adjust a point, watch the bend, and read off a value you can trust. Set the control points until the shape matches the feel you want, then copy the line straight into your CSS.
Build your curve above, then style the rest of the page with our CSS gradient generator, box shadow generator, and flexbox generator, or browse the full set of free online tools.
Key Takeaways:
- A cubic-bezier curve sets how a CSS animation distributes its progress over time, written as cubic-bezier(x1, y1, x2, y2).
- The curve runs from (0,0) to (1,1); the four numbers position the two control points that bend it.
- X values stay between 0 and 1; Y values can go below 0 or above 1 to create anticipation or overshoot.
- CSS keywords like ease and ease-out are just named cubic-bezier values you can also write by hand.
- Ease-out curves suit most interface motion; avoid linear except for things that truly move at a constant rate.
- This generator runs entirely in your browser and outputs a ready-to-paste transition line.
Frequently Asked Questions (FAQs)
What does cubic-bezier mean in CSS?
It is a timing function that controls the rate of an animation. The four numbers define two control points on a curve that runs from the start of the animation, point (0,0), to the end, point (1,1). The shape of that curve decides whether the animation speeds up, slows down, or does both.
What do the four numbers in cubic-bezier represent?
They are the x and y coordinates of two control points: x1 and y1 for the first, x2 and y2 for the second. X is time and y is progress. The X values must stay between 0 and 1, while the Y values can go below 0 or above 1 to create overshoot or pull-back effects.
Can a cubic-bezier curve go above 1 or below 0?
The Y values can. A Y above 1 makes an element move past its target before settling, which looks like a bounce, and a Y below 0 makes it pull back before moving forward, which looks like anticipation. The X values cannot, because time cannot run backward or past the end of the animation.
What is the difference between ease and ease-out?
The ease keyword starts slow, speeds up, and slows down again, equal to cubic-bezier(0.25, 0.1, 0.25, 1). The ease-out keyword starts at full speed and slows to a gentle finish, equal to cubic-bezier(0, 0, 0.58, 1). Ease-out is often preferred for elements entering the screen because the gentle stop feels natural.
How do I use the cubic-bezier value in my CSS?
Put it where a timing function goes, such as transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); or as the easing in an animation. This tool outputs the complete transition line for you, so you can copy it directly into your stylesheet and adjust the duration as needed.
Why does my animation look unnatural with linear easing?
Linear easing moves at a constant speed from start to finish, which nothing in the physical world does. Real objects accelerate and decelerate, so motion that does the same feels right. Switch from linear to an ease-out curve for entrances and exits, and reserve linear for continuous motion like a spinner or scrolling marquee.
