Why use Cubic Bezier Generator
Every CSS transition follows a curve that decides how the change is distributed across its duration, and cubic-bezier() is how you write your own instead of settling for the handful of built-in keywords. Adjust the two control points and you can see both the curve itself and a live animation driven by it, which matters because a curve that looks reasonable on a graph can still feel wrong in motion. The presets cover the standard keywords plus two curves the keywords cannot express — an overshoot that springs past the target before settling, and an anticipation that pulls back slightly before moving forward.
What the four numbers actually control
A cubic bezier is defined by four points, but two of them are fixed: the curve always starts at (0,0) and ends at (1,1). The four numbers you write are the coordinates of the two control points in between, in the order x1, y1, x2, y2. The horizontal axis is time — how far through the duration you are — and the vertical axis is progress, how much of the change has been applied. This is why the axes are not interchangeable and why x is constrained to the range 0 to 1 while y is not: time cannot run backwards or extend past the duration, but the animated value can perfectly well overshoot its target and come back. Reading a curve becomes intuitive once you internalise that a steep section means fast movement and a flat section means the value is barely changing. A curve that is flat at the start and steep at the end is the classic ease-in: nothing much happens, then everything happens at once.
Choosing curves that feel right rather than look right
The most useful rule in interface motion is that things entering the screen and things leaving it want different curves. An element appearing should decelerate into place — fast at first, slowing as it arrives — which is an ease-out and reads as responsive because the movement begins the instant the user acts. An element leaving should accelerate away, an ease-in, because nobody needs to watch it depart carefully. Applying a symmetrical ease-in-out to both is the most common mistake and is what makes an interface feel slightly sluggish even at a short duration, since it spends the opening frames barely moving. Duration interacts with this: the more dramatic the curve, the shorter it should run, because an aggressive overshoot at 600ms reads as a glitch while the same curve at 200ms reads as liveliness. It is also worth pairing any decorative motion with a prefers-reduced-motion query, since overshoot and bounce are precisely the effects that trigger discomfort for motion-sensitive users.
Step by step
- 1
Pick a preset to start from, or leave it on Custom to shape the curve entirely with the sliders.
- 2
Drag the P1 sliders to control how the animation starts, and the P2 sliders to control how it ends.
- 3
Set a duration and watch the live animation — motion tells you far more than the curve shape alone.
- 4
Copy the generated CSS, which includes both the longhand properties and the transition shorthand.
Where this helps
Making UI transitions feel deliberate
A menu that eases out quickly and settles gently reads as responsive, while a linear transition of the same duration feels mechanical.
Adding a spring without a JavaScript library
A y value above 1 overshoots and settles back, which gives buttons and modals a bounce that costs nothing beyond a single CSS property.
Matching a design system's motion spec
Design tools export easing as four bezier values. Pasting them here confirms the curve behaves the way the spec intends before it ships.
Debugging an animation that feels wrong
When motion feels sluggish despite a short duration, the curve is usually the cause — a slow start eats most of the time before anything visibly moves.
Worth knowing
- Use ease-out for entrances and ease-in for exits; symmetrical curves are rarely the right choice for either.
- Keep interface transitions between 150ms and 300ms — long enough to read as motion, short enough not to make people wait.
- Wrap expressive curves in a prefers-reduced-motion media query so users who ask for less movement are not subjected to bounce effects.