Free CSS Cubic Bézier / Easing Generator
Something not working? Report a problem
About the Cubic Bézier Generator
Design custom CSS easing curves by dragging the Bézier control points — see an animated preview, compare to built-in easings and copy the cubic-bezier() value.
How to use the Cubic Bézier Generator
- 1Drag the two control points on the curve editor to shape the easing.
- 2Watch the animated ball preview to see how your curve feels in motion.
- 3Pick a preset like ease-in or ease-out as a starting point.
- 4Copy the cubic-bezier() CSS value and paste it into your transition or animation.
Frequently asked questions
What is a cubic Bézier curve in CSS?
A cubic-bezier() function defines a timing curve for CSS transitions and animations. It takes four numbers — the x and y coordinates of two control points — that shape how speed changes over time.
What do the four numbers mean?
cubic-bezier(P1x, P1y, P2x, P2y) — P1 and P2 are the two control handles. X values must be between 0 and 1 (time axis). Y values can exceed 0–1 to create overshoot/bounce effects.
How is this different from ease, ease-in, ease-out?
Those keywords are just shorthand for specific cubic-bezier() values. 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). This tool lets you craft any curve you need.
Is this tool client-side only?
Yes — everything runs in the browser. No data is sent anywhere.