Cubic Bezier Generator

Easing curve

Drag either handle. The vertical axis may go past 0 and 1, which is how overshoot and anticipation are made.

First control point

x0.42

Second control point

x0.58

Preview

Presets

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

How to build a CSS easing curve

Start from a preset

The four CSS keywords are exact presets here. Back out and Anticipate are overshoot curves that no keyword can express.
Drag the handles

The first handle controls how the motion leaves the start, the second how it arrives at the end. Pulling a handle above the top line makes the value overshoot and settle back.
Watch the replay

The dot runs the curve you built. Replay restarts it so you can compare two candidates without waiting for the loop.
Copy the value

Copy the whole declaration, or just the cubic-bezier() function to drop into an existing transition or animation shorthand.

Common Use Cases

Menus and drawers

A panel that leaves fast and arrives gently reads as responsive. Ease-out and its steeper variants do that.

Button and card hovers

Short transitions need a curve with an early rise, or the motion looks sluggish at 150ms.

Playful overshoot

A control point above 1 makes an element pass its target and settle, which reads as spring without a physics library.

Matching a design spec

Design tools export easing as four numbers. Paste them in, confirm the shape, and keep the motion identical in CSS.

Why use a cubic bezier editor?

CSS gives you four keywords - ease, linear, ease-in, ease-out, ease-in-out - and then hands you cubic-bezier() with four numbers and no way to picture what they do. Those numbers are the two control points of a curve that maps elapsed time to progress, and typing them blind means reloading until the motion feels right. This page draws the curve, lets you drag the handles, and replays the motion beside it, so you choose the feel and copy the value.

A CSS easing function is a cubic bezier curve from (0,0) to (1,1). The horizontal axis is elapsed time and the vertical axis is how far the animation has progressed, so the shape of the curve is the feel of the motion. The two numbers pairs in cubic-bezier() are the two control points that bend it.

The four built-in keywords are just named points on that space, and they cannot express everything. A control point above 1 produces overshoot - the value passes its target and settles - which is how a spring-like motion is written without a physics library. A control point below 0 produces anticipation, where the element pulls back before it moves. Both are supported here and both are impossible with a keyword.

The preview matters as much as the curve. Two curves that look similar on the grid can feel very different at 200ms, so the dot replays the real timing beside the shape you are editing. Everything runs in your browser. For the animation itself, the CSS Animation Generator builds the keyframes this curve drives.

How it compares

The well-known cubic-bezier editors do this job well and have for years. This one keeps the same model - drag two handles, read four numbers - and sits beside the rest of the FindUtils CSS generators, so a shadow, a gradient and an easing curve come from the same place with the same copy behaviour.

It is deliberately limited to one curve. It does not chain keyframes, generate a full animation, or export to a motion library. The CSS Animation Generator is the page for the animation around it.

Easing Tips

The horizontal axis is time and stays between 0 and 1. The vertical axis is progress and may leave that range - that is exactly what produces overshoot.
ease-out suits things entering the screen and ease-in suits things leaving. Using ease-in on an entrance is the most common reason motion feels slow.
Keep UI transitions between 150ms and 300ms. A perfect curve cannot rescue a duration that is too long.
An overshoot curve on an element that hard-clips at its container edge will look broken. Give it room or keep the curve inside 0 to 1.
Your curve stays in the browser and nothing is uploaded to FindUtils. The page itself is not request-free: like the rest of the site it loads advertising and analytics scripts.

Frequently Asked Questions

What do the four numbers in cubic-bezier() mean?

They are two control points, written x1, y1, x2, y2. The curve always runs from (0,0) to (1,1); those two points bend it. X is time and must stay between 0 and 1, while Y is progress and may go outside it.

How do I make a springy, overshooting motion?

Drag the second handle above the top line so its Y value goes past 1. The value overshoots its target and settles back. The Back out preset is a usable starting point.

Why is my X value clamped?

Because a control point with X outside 0 to 1 would let the curve move backwards in time, which CSS does not allow. Y is deliberately not clamped, since that range is where overshoot lives.

What is the difference between ease-in and ease-out?

Ease-in starts slowly and accelerates, which suits something leaving the screen. Ease-out starts fast and decelerates, which suits something arriving. Using them the wrong way round is the usual cause of motion that feels sluggish.

Can I use this for a CSS animation as well as a transition?

Yes. The same value works in animation-timing-function and in the animation shorthand, not just transition-timing-function. Copy the function on its own with the second button.

Does it work with the steps() timing function?

No. steps() is a different family that jumps rather than curves, so it cannot be represented by two control points. Write it by hand when you want a frame-by-frame effect.

Is the generated value production ready?

Yes. cubic-bezier() has been supported without a prefix in every current browser for many years, and the output is a plain CSS value.

Is anything uploaded?

No. The curve exists only in your browser and no request carries it. Third-party analytics and ads load on the page, as on the rest of the site.