CSS Cubic Bezier & Spring Easing Generator
Shape an easing curve by dragging its handles or picking a preset, watch it play next to a linear reference, and copy the CSS straight into your transition.
Overview
An easing function controls how an animation moves through time: whether it starts slowly, settles gently, or overshoots and springs back. CSS describes most easings with cubic-bezier(x1, y1, x2, y2), four numbers that are almost impossible to tune by guessing. Dragging the two control points and watching the result play is much faster than editing numbers and reloading.
Springs are the exception: real spring motion can bounce more than once, which a single cubic bezier can't express. The spring mode simulates a mass on a spring with the stiffness and damping you choose, then samples the motion into a CSS linear() easing, which modern browsers support natively. It also works out how long the spring takes to settle, so you can use that as the transition duration.
Examples & Sample Data
The CSS ease keyword as a cubic bezier
Preset: ease
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
An overshooting ease-out
Preset: easeOutBack, duration 600 ms
transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
A bouncy spring
Mass 1, stiffness 100, damping 10
transition: transform 1400ms linear(0, …, 1); (overshoots about 16%, then settles)
How It Works
- Choose Cubic bezier or Spring.
- For a bezier, pick a preset or drag the two handles. You can also type exact values, or focus a handle and use the arrow keys (hold Shift for bigger steps).
- For a spring, set mass, stiffness, and damping. More stiffness makes it faster; more damping makes it bounce less.
- Press Play to compare your easing with a linear movement, then copy the CSS.
Common Use Cases
Matching a design spec
Designers often hand over easing as four bezier numbers or a named curve. Paste the values in to see exactly how they feel before shipping.
Spring animations without a JavaScript library
CSS linear() lets you use spring motion in plain CSS transitions and keyframes instead of animating every frame in JavaScript.
Tips & Best Practices
- y values outside 0 to 1 make the animation overshoot or pull back before moving. x values must stay between 0 and 1; that's a CSS rule.
- Short UI transitions (150 to 300 ms) usually feel best with an ease-out curve; save long, bouncy springs for larger, more playful movements.
- linear() is supported in current Chrome, Edge, Firefox, and Safari. If you need to support older browsers, keep a cubic-bezier fallback declared first.
Frequently Asked Questions
No. The curve, the spring simulation, and the preview all run in your browser.
They are the coordinates of two control points, (x1, y1) and (x2, y2). The curve always runs from (0, 0) to (1, 1); x is the share of the duration that has passed and y is the share of the movement completed. The control points pull the curve towards them.
A cubic bezier can overshoot once at most, but a spring can bounce several times. linear() takes a list of points and joins them with straight lines, so a finely sampled spring curve can be reproduced closely.
A spring's timing comes from its physics, not a chosen length. The tool runs the simulation until the movement settles within 0.1% of the end and uses that time, so the motion isn't cut off or slowed down.
Related Tools
Explore more high-performance utilities.