What is a cubic-bezier easing function?

cubic-bezier(x1, y1, x2, y2) defines how a CSS transition or animation accelerates over time using two control points. The x values (time) stay between 0 and 1; the y values (progress) can go beyond that to create overshoot and anticipation.

How do I use the value in CSS?

Paste it as the timing function: e.g. transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); or as animation-timing-function on a @keyframes animation.

Is anything uploaded?

No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Omnibus

Preview

Presets

Drag the two dots to shape the curve. The X axis is time (0–1); the Y axis is progress, which can go past 0 and 1 for anticipation and overshoot.

CSS

transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

CSS cubic-bezier easing generator

Drag the two control points to shape an easing curve, or start from a preset, and watch a sample element animate with your timing function. When it feels right, copy the cubic-bezier() value into your transition or animation.

The whole tool is client-side, so nothing is uploaded — tune the curve and copy the code.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Box Shadow Generator

Layer offset, blur, spread, color & inset shadows.

CSS Border Radius Generator

Round each corner independently in px, % or em.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator — frequently asked questions

What is a cubic-bezier easing function?: cubic-bezier(x1, y1, x2, y2) defines how a CSS transition or animation accelerates over time using two control points. The x values (time) stay between 0 and 1; the y values (progress) can go beyond that to create overshoot and anticipation.
How do I use the value in CSS?: Paste it as the timing function: e.g. transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); or as animation-timing-function on a @keyframes animation.
Is anything uploaded?: No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free. A single unobtrusive ad slot covers hosting.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.