Cubic Bezier Generator
Design a CSS cubic-bezier() easing curve with sliders or presets, see the curve and the motion it produces, and copy the transition CSS.
Free · No sign-up · Your inputs stay in your browser
Input
Design a cubic-bezier easing curve
Output
CSS
58 characters
x is time and must stay between 0 and 1; y is progress and may overshoot, which is what gives a 'back' easing its bounce past the end. Ease-out curves (fast start, slow finish) suit things entering the screen; ease-in suits things leaving. Wrap long or large motion in @media (prefers-reduced-motion: no-preference).
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Reading the curve
The horizontal axis is time and the vertical axis is progress. A curve that rises steeply then flattens is ease-out: fast start, gentle stop, which suits elements entering the screen. Ease-in starts slowly and suits elements leaving. A y value above 1 overshoots the end and settles back, the back easing. The function is defined in CSS Easing Functions Level 1.
Reduced motion
Some readers get dizzy or nauseous from large motion. Wrap non-essential animation in @media (prefers-reduced-motion: no-preference) so it only runs for people who have not asked to reduce motion.