Design a custom cubic-bezier() easing curve visually instead of guessing at
four numbers — drag the two control points and watch a live element transition with that exact timing
function, then copy the CSS for use in transition-timing-function or
animation-timing-function.
cubic-bezier(x1, y1, x2, y2) defines a custom easing curve for transition-timing-function or animation-timing-function, giving precise control over acceleration and deceleration beyond the built-in ease/linear keywords.
ease-in-out is itself a preset cubic-bezier() curve; writing your own cubic-bezier() values lets you create curves with more pronounced overshoot, snap, or custom acceleration that the built-in keywords can't produce.
This generator runs a live element transition using your exact curve values, so you can see and feel the timing before copying the CSS into your project.
A quick, slightly-overshooting curve (control points past 0–1 on the Y axis) often feels responsive for hover/press interactions; a smoother ease-out-style curve suits larger UI transitions.
Yes. Toggle Tailwind mode to get the closest matching Tailwind ease-* utility class, or an arbitrary-value class carrying the exact cubic-bezier().
Yes — completely free with no sign-up, and it runs entirely in your browser.