Cubic Bezier Generator
Design a custom CSS easing curve and copy it as a cubic-bezier() timing function. Set the four control values, start from a preset like ease-in-out or a springy ease-out-back, and watch the curve and a live animated preview update as you go. A progress table shows how far the animation has moved at each point in time, so you can tell a snappy curve from a slow start at a glance. Works for transition-timing-function and animation-timing-function alike.
Build a CSS cubic-bezier() easing curve for transitions and animations. Drag the numbers, pick a preset, or match a keyword, then copy the timing function. The x values run from 0 (start) to 1 (end); the y values can overshoot for a springy feel.
CSS value (same as "ease")
cubic-bezier(0.25, 0.1, 0.25, 1)transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);Preview
Progress over time
| Time | Progress |
|---|---|
| 0% | 0% |
| 20% | 30% |
| 40% | 68% |
| 60% | 89% |
| 80% | 98% |
| 100% | 100% |