Cubic Bezier Generator Online Free — CSS Easing

chain

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

drag or ↑↓←→ nudge focused point (⇧ ×10)

PREVIEW

PRESETS

Framer Motion / GSAP CustomEase-style [x1, y1, x2, y2]

drag the handles · generated client-side

Cubic Bezier Generator Online

Updated 2026-08-19

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

Is anything uploaded to a server?

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

What is a cubic-bezier easing function?

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.

How do I use the value in CSS?

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.

Can I create a bounce or overshoot effect?

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.

Why does the preview animation restart when I change the curve?

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.

// works with your data

CSS Formatter CSS Minifier Sort & Dedupe Lines Slug Generator Reverse Text Text Repeater