Cubic Bezier Generator Online Free — CSS Easing

Cubic Bezier Generator — easing curve editor, live preview runs in your browser · nothing uploaded

PREVIEW

PRESETS

CSS

drag the handles · generated client-side

Cubic Bezier Generator Online

Updated 2026-07-09

Create CSS cubic-bezier easing curves online for free. Drag the two control handles to shape the curve, watch a dot animate with your timing function, and copy the ready-to-use cubic-bezier() value. Everything runs in your browser, so nothing leaves your machine.

The default ease and ease-in-out keywords only get you so far — custom motion needs a custom curve, and tuning four numbers blind is hopeless. This editor lets you shape the curve visually and feel it in the live preview, including overshoot effects when you drag a handle past the edges, then hands you the exact cubic-bezier() to drop into any transition or animation.

// how to use

1 Drag the two handles on the curve to shape the easing, or start from a preset.
2 Watch the dot animate with your timing function to feel how it moves.
3 Fine-tune the x1/y1/x2/y2 values if needed, then click Copy to grab the cubic-bezier().

// examples

Standard ease

Input

preset: ease

Output

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

Ease-in-out

Input

preset: ease-in-out

Output

cubic-bezier(0.42, 0, 0.58, 1)

// common uses

Designing custom CSS transition and animation easing Creating overshoot and anticipation effects Matching motion to a design system's feel Learning how cubic-bezier control points shape timing

// faq

No. The curve, the preview, and the generated value all run in your browser — nothing leaves your machine.

It defines how a CSS transition or animation accelerates over time using two control points. The four numbers are the x and y of each point; x stays between 0 and 1 (time) while y can go beyond it to create overshoot.

Drop it into the transition-timing-function or animation-timing-function property, for example `transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)`. The named keywords ease, ease-in, and ease-out are just common cubic-bezier presets.

Yes. Drag a handle above the top or below the bottom of the box so its y value goes past 0 or 1, and the curve will overshoot — the basis of "back" and bounce-style easings.

The preview re-applies the animation whenever the timing function changes so you always see the current curve in motion, which makes small adjustments easy to compare.

// related

CSS Gradient Generator Box Shadow Generator Color Palette Generator CSS Formatter Color Converter