Typography
- Free forever
- No sign-up
- Instant results
Easing Reference
A curated reference of the most useful CSS cubic-bezier easing values, named so you know what you're getting. Click any row to copy the value.
| Name | Value |
|---|---|
| ease-out-expo | cubic-bezier(0.19, 1, 0.22, 1) |
| ease-in-out-quad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| ease-in-cubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| ease-out-back | cubic-bezier(0.34, 1.56, 0.64, 1) |
| ease-in-out-back | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
| spring-like | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
When would you use this?
The built-in CSS easing keywords (ease, ease-in, ease-out) are fine, but they're pretty generic. The real magic happens when you use cubic-bezier() to craft exactly the feel you want. A springy button, a smooth drawer slide, an energetic reveal. The problem is cubic-bezier values aren't exactly memorable. This reference collects the most useful ones, named so you know what you're getting, ready to copy in a click.