Cubic Bézier Generator

Craft a custom CSS easing curve. Drag the two control points, watch the motion play out live next to a linear reference, start from a named preset, and copy the exact cubic-bezier() timing function.

Presets

Live Animation

your easing

linear

Duration900ms

CSS Code

Cubic Bézier Easing: The Complete Guide

Every CSS transition and animation moves along an easing curve — a function that maps elapsed time to visual progress. The keywords ease, ease-in, ease-out, and ease-in-out are just named presets of one underlying function: cubic-bezier(). Defining your own curve is how you get motion that feels deliberate and on-brand instead of generic.

How the Four Numbers Work

A cubic-bezier curve is anchored at (0, 0) (start) and (1, 1) (end). You control its shape with two handles: cubic-bezier(x1, y1, x2, y2), where (x1, y1) is the first control point and (x2, y2) the second. The horizontal axis is time and the vertical axis is progress. The x values must stay between 0 and 1, but the y values can go below 0 or above 1 — that's what creates anticipation and overshoot effects like easeOutBack.

Reading the Curve

Steep at the start, gentle at the end = ease-out: fast then settling. Great for elements entering the screen.
Gentle start, steep finish = ease-in: slow then accelerating. Good for elements leaving the screen.
Gentle at both ends = ease-in-out: the most natural feel for moving things already on screen.
Curve that dips below 0 or rises above 1 = back/overshoot: the element pulls back before launching or springs past its target then settles.

The CSS Keyword Equivalents

linear → cubic-bezier(0, 0, 1, 1)
ease → cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in → cubic-bezier(0.42, 0, 1, 1)
ease-out → cubic-bezier(0, 0, 0.58, 1)
ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

Practical Tips

Most polished UI motion uses an ease-out curve for entrances (content arrives quickly then settles) and shorter durations than designers expect — 150–300ms feels snappy, while 500ms+ starts to feel sluggish for everyday interactions. Use overshoot easings sparingly for playful accents like a button press or a toast popping in. Always respect prefers-reduced-motion and provide a reduced or instant alternative for users who request it.

Frequently Asked Questions

It's the easing function behind every CSS transition and animation. cubic-bezier(x1, y1, x2, y2) defines a curve from (0,0) to (1,1) that maps elapsed time to visual progress, letting you design custom acceleration instead of using only the built-in keywords.

The Y axis is progress, and progress is allowed to overshoot the target (above 1) or pull back before starting (below 0). That's how "back" and bounce-like easings work. The X values, which represent time, must stay within 0 and 1.

Paste it as the timing function, e.g. transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); or animation-timing-function: cubic-bezier(...). Use the "Copy transition" button to grab a ready-made declaration.

An ease-out curve (fast start, soft landing) suits most entrances and feels responsive. Keep durations short — 150–300ms. Reserve overshoot easings for playful accents, and respect prefers-reduced-motion.

Yes — the preview drives a real CSS transition using your exact cubic-bezier value, shown side by side with a linear reference so you can feel the difference before you ship it.