The Cubic Bezier Generator lets you design custom CSS easing curves by dragging the two control handles of a cubic-bezier curve. As you shape the curve, a live animation shows exactly how the timing feels, so you can dial in motion that speeds up, slows down, or overshoots the way you want.
Start from a preset like ease-in-out or a springy “back” curve, fine-tune the handles or the numeric values, and copy the result as a CSS transition-timing-function or a Tailwind class. Everything runs in your browser.
How to use the cubic bezier generator
- Pick a preset to start, or drag the two coloured handles on the curve.
- Watch the preview dot to feel the timing, and adjust the animation duration to taste.
- Fine-tune the exact X/Y values of each control point if you need precision.
- Copy the cubic-bezier() timing function as CSS or a Tailwind class.
What cubic-bezier does
CSS animations and transitions use a timing function to control how a property changes over time. cubic-bezier(x1, y1, x2, y2) defines that curve with two control points: the X values (between 0 and 1) control timing and must stay in range, while the Y values control progress and can go below 0 or above 1 to create anticipation or overshoot (“springy”) effects. The built-in keywords ease, ease-in, ease-out, and ease-in-out are just named cubic-bezier curves.
Reading the curve
The horizontal axis is time and the vertical axis is progress. A steep section means the property changes quickly; a flat section means it moves slowly. A curve that dips below the bottom or rises above the top makes the element pull back before starting or shoot past its target and settle — the classic “back” or spring feel.
Frequently Asked Questions
What is a cubic-bezier easing curve?
It is a CSS timing function defined by two control points, cubic-bezier(x1, y1, x2, y2), that describes how an animation or transition progresses over time — for example starting slow and ending fast.
Why can the Y values go above 1 or below 0?
The Y (progress) values are allowed outside the 0–1 range to create overshoot and anticipation effects, where the element springs past its target or pulls back before moving. The X (time) values must stay between 0 and 1.
How do I use the generated value?
Copy the cubic-bezier() value and use it as your transition-timing-function or animation-timing-function, for example: transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1).
Can I get it as a Tailwind class?
Yes. Switch the output to “Tailwind” to get an ease-[cubic-bezier(...)] arbitrary-value class.