Analytics cookies
We use optional Google Analytics to understand which tools are useful and improve the site. Analytics stays off unless you accept. Privacy Policy
About this tool
This visualizer is an editor for CSS cubic-bezier() easing curves and spring-style linear() curves. Shape a curve on the graph or with exact numbers, check its progress at any moment with the time slider, and watch it move, scale, fade or rotate a test object. Then copy the easing value or a ready-made transition.
Everything runs in your browser, and nothing is saved: reloading the page starts again from the default ease curve.
How cubic-bezier easing works
An easing curve maps elapsed time, on the horizontal axis, to eased progress, on the vertical axis. Both run from 0 to 1. The curve always starts at (0, 0) and ends at (1, 1); the two control points between them shape the acceleration. This is the tool’s default, the same curve as the ease keyword:
cubic-bezier(0.25, 0.1, 0.25, 1)0.25, 0.1- P1, the first control point: x1 = 0.25 and y1 = 0.1. It sits low and early, so the motion starts gently.
0.25, 1- P2, the second control point: x2 = 0.25 and y2 = 1. Full progress this early in time pulls the curve up, so most of the change happens in the first half and the motion settles slowly.
Halfway through the duration, this curve is already 80.2% of the way there. x1 and x2 must stay between 0 and 1, because time can only move forward; CSS rejects the whole value otherwise. y1 and y2 can go below 0 or above 1, which makes the motion overshoot its start or end.
Duration doesn’t change the shape. A 300 ms and a 1000 ms transition with the same curve pass through the same progress at the same share of their time; the longer one simply takes longer.
Spring easing and linear()
Spring mode models a spring that starts at rest and is pulled to its end value, stretched so it has settled by the end of the duration. Bounce sets how loosely it is damped. At 0 it settles without overshooting; higher values carry it past the end and back before it settles.
A spring curve can’t be written as cubic-bezier(), so the tool samples it at 41 evenly spaced moments and writes those values as a linear() easing function, which joins them with straight lines. The graph, the preview and the copied CSS all use the same points.
How to use the visualizer
- Start from a preset, such as Ease Out for something that enters, or Ease In for something that leaves.
- Drag the two handles on the graph, or type exact values in the X1, Y1, X2 and Y2 fields.
- For a spring-style motion, switch to Spring and set the bounce, or start from a spring preset.
- Drag the time slider to see the progress at any moment, or press Replay to watch the whole motion.
- Switch between Move, Scale, Fade and Rotate, and set the duration and delay.
- Copy the easing value, or the transition CSS for the effect you chose.
Choosing an easing curve
No curve suits everything, but these starting points work for most interfaces:
- Ease Out for things that appear or enter: they arrive quickly, then settle.
- Ease In for things that leave: they start slowly, then speed away.
- Ease In Out or Smooth for things that move from one place to another on screen.
- Linear for continuous motion such as spinners and progress bars. For movement it can feel mechanical.
- Overshoot for occasional, playful emphasis. Used everywhere, it gets tiring.
Timing matters as much as the curve. Small changes such as a button state or a tooltip usually feel right at 150 to 300 ms; larger movements can take a little longer. Try your choice at the real duration with Replay before you ship it.
Easing and reduced motion
Some people turn on a reduce-motion setting because movement on screen can cause discomfort or distraction. A good curve doesn’t change that. Use the prefers-reduced-motion media query to add movement only for people who haven’t asked for less:
@media (prefers-reduced-motion: no-preference) {
.element {
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}
}This tool follows the same idea. Nothing moves when the page loads, the time slider lets you inspect a curve without any animation, and Replay only plays when you press it.
Frequently asked questions
What is cubic-bezier easing?
cubic-bezier() is a CSS easing function. It sets how a transition or animation’s progress is spread over its duration. Its four numbers place two control points that bend a curve running from (0, 0) to (1, 1). The keywords ease, ease-in, ease-out and ease-in-out are fixed cubic-bezier curves.
What do x1, y1, x2 and y2 mean?
They are the coordinates of the two control points. x is elapsed time and y is progress, both as fractions of the whole. (x1, y1) shapes how the motion starts and (x2, y2) how it ends. The curve doesn’t pass through these points; it bends toward them, like the handles in a vector drawing app.
Can a cubic-bezier curve overshoot?
Yes. y1 and y2 can be below 0 or above 1, so progress can pass the end and come back, or pull back before it starts. A transform shows this as movement past the target. A property with fixed limits, such as opacity, stops at those limits, so its overshoot doesn’t show. x1 and x2 must stay between 0 and 1.
What is the difference between easing and duration?
Duration is how long the change takes. Easing is how the progress is spread over that time. A longer or shorter duration stretches or squeezes the same curve without changing its shape: with ease, a 300 ms and a 1000 ms transition are both about 80% of the way there halfway through.
Which easing works best for UI motion?
There’s no single best curve, but a common pattern works well: ease-out for things that appear or enter, ease-in for things that leave, and ease-in-out for things that move from one place to another. Linear suits continuous motion such as spinners. Keep overshoot for occasional emphasis, and keep small interface changes short, around 150 to 300 ms.
Does cubic-bezier need JavaScript?
No. cubic-bezier() is plain CSS: use it in transition-timing-function, animation-timing-function, or the transition and animation shorthands. This tool uses JavaScript to draw and preview the curve, but the CSS it writes works on its own.
How should reduced motion affect animations?
Some people set their device to reduce motion, because movement on screen can cause discomfort or distraction. The prefers-reduced-motion media query lets your CSS respect that: remove or shorten movement that is only decoration, or replace it with a simple fade. Motion that carries meaning, such as a progress indicator, can stay if it is gentle.