About the CSS Cubic Bezier Generator
Easing makes animations feel natural. Objects in the real world speed up and slow down instead of moving at a constant speed, and CSS lets you describe that acceleration with a cubic-bezier() timing function. The CSS Cubic Bezier Generator gives you a visual graph where you can drag the two control points to shape the curve.
The horizontal axis represents time and the vertical axis represents progress. Pulling a point above the top or below the bottom creates overshoot and anticipation effects, like the popular "back" easing. Compare your curve side by side with a linear animation, start from presets such as ease-in-out or expo out, and copy the code for transitions or keyframe animations.
How to use the CSS Cubic Bezier Generator
- Pick a preset or start with the default ease curve.
- Drag the pink and blue control points on the graph.
- Click Play animation to compare your curve with linear motion.
- Copy the cubic-bezier CSS value.
Frequently asked questions
What do the four numbers mean?
They are the x and y coordinates of the two control points: cubic-bezier(x1, y1, x2, y2). The start (0,0) and end (1,1) points are fixed.
Why must x values be between 0 and 1?
The x axis represents time, which cannot go backwards, so CSS only allows x values from 0 to 1. The y values can go outside this range to create overshoot.
Which easing is best for UI?
Ease-out curves feel responsive for elements entering the screen, while ease-in suits elements leaving. Keep durations between 150 and 400 milliseconds for most interface motion.