CSS Cubic-Bezier Curve Generator With Preview
Generate a CSS cubic-bezier easing curve with a preview, in your browser.
🔒 100% client-side — no data sent
This tool builds cubic-bezier curves for CSS animation easing, with a visual preview of the motion. Drag the control points and copy the ready-to-paste value for your stylesheet. It all runs 100% in your browser, with no external dependency.
What is it for?
- ▸ Create a custom easing for a smooth CSS transition
- ▸ Reproduce a tailored ease-in-out acceleration curve
- ▸ Preview an animation's motion before integrating it
- ▸ Copy a ready cubic-bezier value for a transition property
FAQ
What is a cubic-bezier function in CSS?
It's an easing function defined by four values that control how an animation or transition speeds up and slows down over time.
How do I use a cubic-bezier value in my CSS?
Copy the generated value and place it in a transition-timing-function or animation-timing-function property, for example cubic-bezier(0.25, 0.1, 0.25, 1).
Can I create a bounce effect with cubic-bezier?
Yes, by placing control points beyond the 0-1 range on the vertical axis, the curve overshoots the target and produces a bounce effect.