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.

x1y1x2y2

Preview

Presets

Compare with

Drag the dots, type the numbers (arrow keys step by 0.01), or pick a preset. Time runs 0–1 left to right; progress can pass 0 and 1 for anticipation and overshoot, and the canvas grows to keep the handles in view.

Format

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 (the canvas grows to keep them in view), type the numbers, paste a cubic-bezier() value, or start from a preset and compare against another one side by side, and watch a sample element animate with your timing function. Springs and bounces, which no cubic-bezier can express, are written as CSS linear(). When it feels right, copy the 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.

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.