📈 CSS Cubic Bezier Generator
Tune the four cubic-bezier control points or pick a preset, watch the motion preview, and copy the easing for your CSS transition.
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);How the css cubic bezier generator works
An easing function controls how an animation accelerates and decelerates over its duration. CSS defines custom easing with cubic-bezier(x1, y1, x2, y2), four numbers that place two control points shaping a curve from start to finish. This generator lets you set those points (or start from presets like ease, ease-in-out, or a springy overshoot), draws the curve, and runs a live motion preview so you can feel the difference. The output is a transition-timing-function value you can paste directly. Everything computes in your browser.
The x values must stay between 0 and 1 (time cannot run backwards), but y values can go below 0 or above 1 to create anticipation and overshoot, the bouncy, lifelike motion that flat easings lack. Good easing is often the difference between an interface that feels cheap and one that feels polished.
Frequently asked questions
What is cubic-bezier in CSS?
cubic-bezier(x1, y1, x2, y2) defines a custom easing curve for transitions and animations using two control points. It lets you go beyond the named keywords (ease, linear, ease-in, ease-out, ease-in-out) to craft any acceleration profile you want.
How do I make a bouncy or springy easing?
Push a control point's y value above 1 (or below 0) so the curve overshoots its target and settles back. For example cubic-bezier(.68,-0.55,.27,1.55) overshoots at both ends. The preview shows the bounce.
What are the default CSS easing keywords?
linear (constant speed), ease (slow start and end, the default), ease-in (slow start), ease-out (slow end), and ease-in-out (slow start and end). Each maps to a specific cubic-bezier, which this tool can show and let you customise.
Where do I use the generated value?
In transition-timing-function or animation-timing-function, for example transition: transform 300ms cubic-bezier(.4,0,.2,1). The generator gives you the cubic-bezier() part to drop in.
Is anything sent to a server?
No. The curve and preview run entirely in your browser.