CSS Easing Curve Generator
Drag the control points to craft a custom cubic-bezier() easing with live preview
cubic-bezier(0.42, 0, 0.58, 1)
.element {
transition: all 1.20s cubic-bezier(0.42, 0, 0.58, 1);
}.element {
animation: move 1.20s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}About CSS Easing Curve Generator
The CSS Easing Curve Generator is a visual editor for the cubic-bezier() timing function. Instead of guessing four magic numbers, you drag two control points on a curve and watch the easing change in real time. The horizontal axis is time, the vertical axis is animation progress — so a steeper slope means faster motion. Allowing Y values beyond 0–1 lets you build anticipation and overshoot effects.
How to Use CSS Easing Curve Generator
Drag the indigo and pink handles to shape the curve, or click a handle and use the arrow keys for precise nudging. Pick a starting point from the keyword or named-easing presets, then fine-tune the X/Y inputs. Adjust the duration and watch the live preview to feel the motion. When you are happy, copy the cubic-bezier() value or the ready-to-paste transition/animation snippet.
Common Use Cases
Polished button and card hover effects, modal and drawer slide-ins, springy "back" overshoots for playful UI, smooth scroll-triggered reveals, and consistent motion design systems. A custom easing curve is the difference between an animation that feels mechanical and one that feels natural and responsive.