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

They're the x and y coordinates of two control points: cubic-bezier(x1, y1, x2, y2). The curve always starts at (0, 0) and ends at (1, 1) — those endpoints are fixed by the spec and aren't part of the four values. x represents elapsed time, y represents progress through the animation.

Why is the x value restricted to 0–1 but y isn't?

x stands for time, and a CSS animation can't run backward or exceed its own duration, so the browser clamps any x outside 0–1. y stands for the animated property's progress, and there's nothing stopping a curve from momentarily overshooting past 100% or dipping below 0% — that's exactly how bounce and anticipation effects work.

How do I make a bounce or overshoot effect?

Drag the second control point above y = 1. A y2 value like 1.2–1.5 makes the animated element sail past its final position before settling back, which reads as a soft bounce. For an anticipation dip — a small pullback before the main motion — drag the first control point below y = 0.

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

ease — the CSS default — starts quickly and eases into a gentle stop, which suits most UI transitions like hover states and dropdowns. ease-in-out is more symmetrical: it accelerates gradually from a standing start and decelerates just as gradually at the end, which reads as calmer and more mechanical — a good fit for modals or larger layout shifts.

Can I use a custom cubic-bezier() curve in a CSS animation, not just a transition?

Yes. cubic-bezier() works anywhere a timing function is accepted: the transition-timing-function property, the animation-timing-function property, and per-keyframe timing functions inside an @keyframes block.

Does the preview send anything to a server?

No. The graph, the ball animation, and the generated CSS all run locally in your browser tab. Nothing about your curve is uploaded or stored.

Cubic Bezier Easing Generator — Custom CSS Animation Curves

Preview

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

A visual editor for the CSS cubic-bezier() timing function. Drag the two control point handles on the graph to shape the curve, pick a starting point from the standard ease presets, and watch a ball glide across the preview track using your exact easing. When it feels right, copy the timing-function declaration straight into your CSS.

How it works

1
Start from a preset Click ease, ease-in, ease-out, ease-in-out, or linear to load its control points as a starting shape, then fine-tune from there.
2
Drag the control points Each handle controls how sharply the animation accelerates near its end of the curve. Drag a handle above the graph for overshoot, or below it for an anticipation dip before the motion starts.
3
Preview and copy Hit Play to send the ball across the track with your curve applied as a real CSS transition. Copy the cubic-bezier() value once the motion looks right.

Your data stays private

All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.

Frequently asked questions

What do the four numbers in cubic-bezier() mean?: They're the x and y coordinates of two control points: cubic-bezier(x1, y1, x2, y2). The curve always starts at (0, 0) and ends at (1, 1) — those endpoints are fixed by the spec and aren't part of the four values. x represents elapsed time, y represents progress through the animation.
Why is the x value restricted to 0–1 but y isn't?: x stands for time, and a CSS animation can't run backward or exceed its own duration, so the browser clamps any x outside 0–1. y stands for the animated property's progress, and there's nothing stopping a curve from momentarily overshooting past 100% or dipping below 0% — that's exactly how bounce and anticipation effects work.
How do I make a bounce or overshoot effect?: Drag the second control point above y = 1. A y2 value like 1.2–1.5 makes the animated element sail past its final position before settling back, which reads as a soft bounce. For an anticipation dip — a small pullback before the main motion — drag the first control point below y = 0.
What is the difference between ease and ease-in-out?: ease — the CSS default — starts quickly and eases into a gentle stop, which suits most UI transitions like hover states and dropdowns. ease-in-out is more symmetrical: it accelerates gradually from a standing start and decelerates just as gradually at the end, which reads as calmer and more mechanical — a good fit for modals or larger layout shifts.
Can I use a custom cubic-bezier() curve in a CSS animation, not just a transition?: Yes. cubic-bezier() works anywhere a timing function is accepted: the transition-timing-function property, the animation-timing-function property, and per-keyframe timing functions inside an @keyframes block.
Does the preview send anything to a server?: No. The graph, the ball animation, and the generated CSS all run locally in your browser tab. Nothing about your curve is uploaded or stored.

From the blog

CSS cubic-bezier(): How Custom Easing Curves Actually Work What the four cubic-bezier() numbers mean, how to build overshoot and anticipation effects, and when the built-in ease keywords are enough. Read the post →

Cubic Bezier Easing Generator — Custom CSS Animation Curves

How it works

Your data stays private

Frequently asked questions

From the blog

Related tools