~/css/cubic-bezier-generator
CSS Cubic Bezier Generator
Shape the speed of an animation with a cubic Bezier curve. Adjust the two control points, start from presets such as ease-out or a spring-like overshoot, and watch a ball animate with your curve next to linear timing.
Your curveLinear
Using the CSS Cubic Bezier Generator
Reading the curve
The horizontal axis is time and the vertical axis is progress. A steep part of the curve means fast movement; a flat part means slow. The classic ease-out curve starts steep and flattens, so motion begins quickly and settles gently, which feels natural for things entering the screen.
The four numbers
cubic-bezier(x1, y1, x2, y2) sets two control points; the curve always starts at 0,0 and ends at 1,1. The x values must stay between 0 and 1 because time cannot go backwards, but y values can go below 0 or above 1 to create anticipation and overshoot.
Choosing an easing
Use ease-out for elements appearing, ease-in for elements leaving, and ease-in-out for things moving from one place to another on screen. Linear suits only continuous motion such as spinners and progress bars.
Overshoot with care
Curves with y values above 1 make an element pass its target and spring back. It feels playful in small doses, such as a toggle or a badge, and tiring on large panels.
Matching easing to duration
Strong ease-out curves suit short animations of 150 to 300 milliseconds, because most of the movement happens at the start and the end settles gently. For longer movements a softer ease-in-out reads better. Keep one or two custom curves for a whole product so motion feels consistent.
Frequently asked questions
Where can I use the timing function?
In transition-timing-function, animation-timing-function, and the shorthand transition and animation properties.
Can cubic-bezier make a real bounce?
Only a single overshoot. Multiple bounces need keyframes or the newer linear() easing function.
Does the animation respect reduced motion?
The preview is for design only. In your site, wrap non-essential motion in a prefers-reduced-motion check.