Free CSS tool
CSS Spring Easing Generator
This CSS spring easing generator turns stiffness, damping and mass into a CSS linear() easing and a matching duration, so you get spring motion with no JavaScript. Copy the two custom properties and use them in any transition or animation.
Updated
- Duration
- 480 ms
- Settles (1%)
- 322 ms
- Overshoot
- 3.4%
:root {
--spring-easing: linear(0, 0.003 0.8%, 0.012 1.7%, 0.027 2.5%, 0.069 4.2%, 0.124 5.8%, 0.258 9.2%, 0.544 15.8%, 0.67 19.2%, 0.775 22.5%, 0.86 25.8%, 0.924 29.2%, 0.979 33.3%, 1.016 38.3%, 1);
--spring-duration: 480ms;
}
.box {
transition: transform var(--spring-duration) var(--spring-easing);
}How to use the CSS Spring Easing Generator
- 1
Set the spring
Pick a preset or drag stiffness, damping and mass. The curve redraws as you go.
- 2
Watch the preview
The preview square moves with the exact CSS the tool outputs.
- 3
Copy the CSS
Copy the --spring-easing and --spring-duration custom properties.
- 4
Use it
Write transition: transform var(--spring-duration) var(--spring-easing) on the element you animate.
Formats and limits
| Inputs | Stiffness 50–800, damping 5–60, mass 0.5–3, or a preset |
|---|---|
| Output | CSS custom properties: a linear() easing and a duration in ms |
| Browser support | linear() works in Chrome 113+, Firefox 112+ and Safari 17.2+ (MDN browser data) |
| Duration | Time for the spring to settle within 0.1% of its target |
| Limit | Pure CSS cannot carry velocity into an interrupted animation |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| CSS Spring Easing Generator (this page) | Setting a CSS spring with physics values (stiffness, damping, mass) and seeing its overshoot and duration | Free, no account, runs in your browser. |
| CSS Spring Easing Generator (kvin.me) | Setting a spring by perceived duration and bounce percentage | Also outputs a linear() custom property. Pick it if you prefer duration and bounce over physics constants. |
| Linear easing generator | Any custom easing written in JavaScript | Paste or write an easing function and get linear() output. More flexible, but you write code. |
Frequently asked questions
Can CSS do spring animations?
Yes, with the linear() easing function. It draws any curve from a list of points, so a sampled spring, including its overshoot, can run as a normal CSS transition or animation.
Which browsers support CSS linear()?
According to MDN browser data, linear() works in Chrome 113 and later, Firefox 112 and later, and Safari 17.2 and later. Add a cubic-bezier fallback before it if you support older browsers.
Why does a CSS spring need a duration?
CSS transitions always run for a set time. The generator measures how long the spring takes to settle and gives you that duration, so the curve plays at the right speed.
What is the difference between a CSS spring and a JavaScript spring?
A CSS spring is a precomputed curve, so it is cheap and needs no library. A JavaScript spring is simulated live, so it can start from the current velocity when the user interrupts it, for example during a drag.
How do I add a fallback for older browsers?
Declare the property twice: first transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), then the linear() line. Browsers that do not understand linear() ignore the second line.