Cubic Bezier Generator
Drag two control points to shape an easing curve and get the cubic-bezier value plus ready-to-paste CSS.
How to use
- Drag the two points, or type the four values below. The curve and the code update as you go.
- The horizontal axis is time from 0 to 1. The vertical axis is progress: below 0 moves backwards first, above 1 overshoots the target.
- Preset buttons apply a common curve that you can then fine-tune.
- Copy curve gives the cubic-bezier function. Copy CSS gives a full transition declaration.
- The preview square runs one round trip at a fixed 0.9 second duration, which makes curves easy to compare.
FAQ
Why is x limited to 0 and 1?
How do I create a bounce?
What is the difference between linear and ease?
Where can I use the generated curve?
How to use
- Drag the points
Pull either circle inside the editor. The curve, the values and the preview update together. Dragging outside the box produces anticipation or overshoot.
- Type exact numbers
The four fields map to P1 and P2. x stays between 0 and 1, y can reach -0.5 and 1.5, and out-of-range values are flagged.
- Start from a preset
Seven presets cover most cases: ease, ease-in, ease-out, ease-in-out, linear, overshoot and snap. Apply one and keep tuning.
- Watch the preview
The square crosses the track and returns on a fixed 0.9 second run. A steeper section of the curve means faster movement there.
- Copy the code
Copy curve gives the cubic-bezier function. Copy CSS gives a full transition line ready for a stylesheet.
About this tool
Whether an interface animation feels right depends far more on its speed curve than on its duration. Nothing in the physical world moves at a constant rate. Objects accelerate from rest and decelerate to a stop, which is exactly what the browser default ease imitates. Linear feels mechanical, ease-in feels dragged and ease-out feels like a natural release. The same element can go from stiff to light with one curve change, which usually beats stretching the duration.
The page turns the four cubic-bezier numbers into two visible control points. The horizontal axis is time and the vertical axis is progress. While you drag, the browser resolves the matching curve and the square runs it immediately. The generated code works with transitions, keyframe animations and the Web Animations API. Seven presets cover common cases, the number fields reproduce a design spec exactly, and everything is computed locally in the browser. No screenshots or recordings are needed to share the result with the team.
How it works
A cubic-bezier is defined by four points: the start (0,0), the end (1,1) and two control points. For a parameter t, x and y each come from a cubic polynomial. Animation needs the inverse mapping from time to progress, while the formula goes from parameter to coordinate. The browser solves x for t with Newton iteration and then evaluates y. That iteration only converges when x increases monotonically, which is why both control x values stay between 0 and 1. If x were allowed to reverse, one time would map to several progress values and the animation would have no single position to show.
An easing curve redistributes speed; it does not change total duration. To make an animation faster, shorten the duration rather than flattening the curve. Overshoot suits buttons and cards, and looks affected on full-page transitions or body text. When the system asks for reduced motion, downgrade to a fade or an instant change. That matters more than the exact curve. Decide the duration first, then shape the feel, and the result stays predictable across viewports.
When to use it
- Modals and drawers
A mobile drawer slides up with ease-out so it decelerates into place. Closing switches to ease-in, moving slowly first and then quickly, which keeps the interaction from feeling sluggish. Keep the run between 250 and 350 milliseconds, since a slower panel blocks the content underneath.
- Landing page hero
The headline and button enter in sequence with a slight overshoot for depth. Keep the overshoot under about 1.1, because text that bounces is harder to read. Reserve the bounce for icons and containers, and leave the body copy on a smooth curve.
- Button feedback
Pressing a button shrinks it briefly and springs back over roughly 120 milliseconds. A steeper curve makes the feedback feel crisp, and fast response matters more than elegance here. Short feedback also survives rapid taps without the states fighting each other.
Tips & tricks
- Enter with ease-out: content arrives quickly and settles slowly, which reads cleaner than ease-in.
- Exit with ease-in: slow first, then fast, so the element leaves without lingering.
- Large elements can move slower than small ones. With the same curve, duration changes the feel more than the shape does.
Things to watch
- Overshoot on text
Text that shifts back and forth is harder to read, especially at small sizes. Reserve bounce for icons, buttons and cards, and keep body content on a smooth curve. A pretty effect is not worth a paragraph that is tiring to read.
- Stretching duration with the curve
A very flat curve does not make an animation elegant, only sluggish. Choose the duration first and the curve second, then test on a real device before shipping. The two decisions are separate, and an emulator hides small timing differences that a real device makes obvious.
- Ignoring reduced motion
Some people feel unwell around movement. Respect prefers-reduced-motion, keep the state change and drop the translation and scaling. This matters far more than which curve you picked. The fallback also keeps the interface usable for everyone, whatever their system settings.