My Tool Studio
CSS

Cubic Bezier Generator

This cubic bezier generator lets you draw a CSS easing curve by dragging two control points, or by typing the four numbers, and then watch it move. A ball runs with your curve next to a second one that uses a curve you pick for comparison, such as linear or ease-out. Test the motion as a move, scale, rotate, fade or width change, at any duration, once or on a loop. The preset list has the five CSS keywords and 24 Penner easings such as easeOutQuart and easeInOutBack, each with a small curve preview. Paste an existing cubic-bezier() value to edit it. Copy the result as a transition, an animation, a CSS variable, a Tailwind class or config, or a Web Animations easing string.

Always freeNo sign upRuns in your browser
timeprogress

cubic-bezier(0.25, 0.1, 0.25, 1)

Same as ease

Your curve cubic-bezier(0.25, 0.1, 0.25, 1)

Compare with linear

Duration1000ms

Presets (29)

CSS keywords
Sine
Quad
Cubic
Quart
Quint
Expo
Circ
Back
.element {
  transition: transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

How to use

01

Shape the curve

Drag the pink and blue control points on the graph, type x1, y1, x2 and y2, click a preset, or paste an existing cubic-bezier() value and press Load.

02

Compare the motion

Press Play or turn on Loop. Pick Move, Scale, Rotate, Fade or Width, set the duration, and choose a second curve to run beside yours.

03

Copy the code

Pick Transition, Animation, CSS variable, Tailwind, JavaScript or Value only and press Copy. Copy share link keeps the curve in a URL.

Why Cubic Bezier Generator

CSS easing keywords as cubic-bezier values

Each keyword is shorthand for a fixed curve. Seeing them as numbers makes it easier to tweak one slightly instead of jumping to a different keyword.

Keywordcubic-bezier valueFeel
linear0, 0, 1, 1Constant speed, mechanical
ease0.25, 0.1, 0.25, 1Quick start, gentle finish; the CSS default
ease-in0.42, 0, 1, 1Slow start, abrupt stop
ease-out0, 0, 0.58, 1Fast start, soft stop
ease-in-out0.42, 0, 0.58, 1Slow at both ends

Reading the curve

The horizontal axis is time and the vertical axis is progress. A steep part of the curve means fast movement, and a flat part means slow movement. Where the curve rises above the top of the square, the element moves past its end value; where it dips below the bottom, it moves backward first.

The dashed diagonal is linear motion. Compare your curve with it: a curve above the diagonal early on means the element gets ahead of linear timing and then slows down, which is why ease-out curves feel responsive.

Common questions

What do the four numbers in cubic-bezier() mean?
They are the x and y of two control points, written cubic-bezier(x1, y1, x2, y2). The curve always starts at 0,0 and ends at 1,1. x is time and y is progress, so the points bend the curve and decide where the motion speeds up or slows down.
Why must the x values stay between 0 and 1?
x is time, and time cannot run backward or past the end of the animation. Browsers reject a cubic-bezier() whose x1 or x2 is outside 0 to 1. The y values have no such limit, which is how overshoot and anticipation are made.
How do I make a bounce or overshoot easing in CSS?
Push y2 above 1, as in cubic-bezier(0.34, 1.56, 0.64, 1), the easeOutBack preset. The motion passes the end value and settles back. A y1 below 0, as in easeInBack, pulls back before moving forward. A true multi-bounce needs keyframes or the linear() function.
Which easing should I use for UI transitions?
Ease-out curves suit elements that enter, because they start fast and settle gently; easeOutQuart and easeOutExpo are common picks. Ease-in suits exits. Ease-in-out suits things that move from one place to another on screen. Keep most UI transitions between 150 and 400ms.
What are Penner easing functions?
They are a set of easing curves named after Robert Penner, such as easeInQuad, easeOutCubic and easeInOutExpo. Each comes in in, out and in-out forms. The cubic-bezier values in this tool are close approximations of those equations, which is how most CSS libraries use them.
What does the CSS ease keyword equal as a cubic-bezier?
ease is cubic-bezier(0.25, 0.1, 0.25, 1), ease-in is (0.42, 0, 1, 1), ease-out is (0, 0, 0.58, 1), ease-in-out is (0.42, 0, 0.58, 1) and linear is (0, 0, 1, 1). Click any of them in the presets to see and edit the curve.
Can I use a custom cubic-bezier in Tailwind CSS?
Yes. Use an arbitrary class such as ease-[cubic-bezier(0.22,1,0.36,1)], without spaces, or add the curve to transitionTimingFunction in your Tailwind config and use it as ease-custom. The Tailwind tab writes both forms.
Why does my color or opacity transition not overshoot?
Properties like opacity and colors are clamped to their valid range, so a curve that goes above 1 simply holds at the end value for a moment. Overshoot shows clearly on transforms such as translate and scale. The tool warns you when your curve has y values outside 0 to 1.
How is steps() different from cubic-bezier()?
steps() jumps between a fixed number of frames with no smooth motion, which suits sprite animations and ticking clocks. cubic-bezier() gives smooth motion with changing speed. The CSS animation generator on this site offers both.
Can I use the cubic-bezier value in JavaScript animations?
Yes. The Web Animations API accepts the same string in its easing option, as shown in the JavaScript tab. Many animation libraries accept cubic-bezier values as arrays of the four numbers too.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS