CSS Spring Easing Generator
Free online CSS spring easing generator. Tune stiffness, damping, and mass to design physics-based spring motion and copy ready-to-use linear() CSS easing. Live preview, eight presets, and full underdamped, critically damped, and overdamped support. 100% client-side.
Loading tool...
What is CSS Spring Easing Generator?
The CSS Spring Easing Generator is a free, browser-based tool for designing physics-based spring motion for CSS transitions and animations. Unlike cubic-bezier(), which is constrained to two control points, a spring is defined by three intuitive physical parameters: stiffness (how strong the spring is), damping (how much resistance slows it), and mass (how heavy the moving object is). The tool numerically solves the damped harmonic oscillator equation, renders the resulting displacement curve, and exports it as a CSS linear() easing function that modern browsers can apply directly. Drag the sliders, pick a preset, and copy the generated linear() value straight into your stylesheet. Everything runs locally in your browser with no data sent anywhere.
Key Benefits
- Spring motion feels more natural than cubic-bezier easing because it models real physical forces, producing authentic overshoot, settle, and bounce
- Three intuitive parameters map directly to how designers and motion engineers already think, instead of guessing four abstract decimal control points
- Automatic damping ratio and regime classification so you instantly know whether your spring is underdamped, critically damped, or overdamped
- Output is a modern CSS linear() easing function, the native browser way to express non-cubic timing such as springs and bounces
- 100% client-side and offline so your design never leaves your device
Common Use Cases
- •Craft a natural spring micro-interaction for buttons, modals, toasts, and notifications
- •Reproduce the feel of a JavaScript spring library (such as Framer Motion or React Spring) in pure CSS
- •Design an underdamped bounce for playful UI elements like toggles, badges, and reaction emojis
- •Build a critically damped curve for fast, overshoot-free transitions on professional dashboards
- •Teach or learn how stiffness, damping, and mass shape spring animation timing
How to Use the CSS Spring Easing Generator
- Pick a Preset: Start from one of eight presets such as gentle, wobbly, bouncy, or snappy. Each preset sets stiffness, damping, and mass to a known-good combination so you get a usable spring immediately.
- Tune the Physics: Drag the stiffness, damping, and mass sliders or type exact numbers. Stiffness makes the spring stronger and faster, damping reduces bounce, and mass makes the motion heavier and slower.
- Preview the Motion: Watch the live animation dot move with your exact spring curve, and check the regime badge (underdamped, critically damped, or overdamped) plus the settle time to understand the feel.
- Copy the CSS: Click Copy to grab the linear() easing value, or copy the full transition shorthand snippet tuned to the settle time. Paste it into transition or animation-timing-function in your stylesheet.
Key Features
- Physics-based spring model with stiffness, damping, and mass sliders plus numeric inputs for precise control
- Eight ready-to-use presets including gentle, wobbly, stiff, slow, molasses, bouncy, snappy, and soft
- Automatic damping ratio and regime classification so you understand the spring behavior at a glance
- Copy-ready linear() CSS easing value plus a full transition shorthand snippet tuned to the settle time
- Live, looping animation preview using your exact spring curve so you can feel the motion before shipping
- 100% client-side and offline with no tracking, no signup, and your design never leaves your browser