CSS Cubic Bezier Generator
About this generator
Design CSS easing curves visually — drag two handles on the SVG plot and the cubic-bezier function updates in real time. Live moving-ball preview shows how the curve actually feels. Side-by-side comparison against linear, ease, and ease-in-out lets you A/B test your curve against the standard keywords.
8 curated presets — the 4 CSS keywords (ease / ease-in / ease-out / ease-in-out) plus 4 modern overshoot easings (spring, bounce-out, snap, gentle) calibrated to feel polished. Y-axis extends past 1.0 so you can tune real overshoot springs.
4 export formats — CSS (transition-timing-function + var), SCSS variable, Tailwind config block, JS array for Framer Motion / GSAP / anime.js. Permalink URL persists every adjustment. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Easing Curve Designer?
How to design a custom easing curve
Easing reference
| Cubic-bezier | Keyword | Use for |
|---|---|---|
| cubic-bezier(.25,.1,.25,1) | ease | Default browser easing — slight ease-in, gentle ease-out. Safe but unmemorable. |
| cubic-bezier(0,0,1,1) | linear | Constant velocity. Use for continuous motion (rotation, marquee). Reads as mechanical. |
| cubic-bezier(.42,0,.58,1) | ease-in-out | Symmetric S-curve. Use for transitions where both start and end matter equally (modals, drawers). |
| cubic-bezier(.34,1.56,.64,1) | spring | Y > 1 means overshoot. The ball passes the target then settles back — the canonical "delightful" easing for UI. |
| cubic-bezier(.6,.05,.4,1) | snap | Sharp acceleration, soft landing. Use for "decisive" interactions like dismissing a card. |
Common easing patterns
.button {
transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.button:hover {
transform: scale(1.06);
}:root {
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--ease-snap: cubic-bezier(.6, .05, .4, 1);
}
.modal {
transition: transform 0.5s var(--ease-spring);
}<motion.div
animate={{ x: 100 }}
transition={{ duration: 0.6, ease: [0.34, 1.56, 0.64, 1] }}
/>Pro tips
Frequently asked questions
Why drag-to-edit instead of typing four numbers?
Because the relationship between (x1, y1, x2, y2) and how the curve FEELS is non-obvious. Setting x1 = 0.34, y1 = 1.56 gives you a spring; setting x1 = 0.34, y1 = -0.56 gives you a recoil. Numerically these look almost identical; visually they're opposite. Drag-to-edit lets you SEE the curve shape and the live moving-ball preview at the same time — you tune by motion, not by math. Once you've got the curve you want, copy the numbers via the export. Most designers never touch the numbers directly.
What's an 'overshoot' easing and when should I use it?
An overshoot easing has its Y values exceed 1.0 mid-curve — meaning the animated property briefly goes past its target value before settling back. Spring (0.34, 1.56, 0.64, 1) and bounce-out (0.68, -0.55, 0.27, 1.55) are overshoot easings. Visually: a button scaling from 1.0 to 1.2 with a spring easing briefly goes to ~1.25 before settling at 1.2, giving a satisfying 'pop' that feels alive. Use for: button clicks, modal entrances, success confirmations, drag-and-drop. Don't use for: scroll-triggered reveals (the overshoot looks broken when the scroll position has already passed), continuous loops (the overshoot accumulates uncomfortably).
Why are spring and bounce-out useful even though they're 'unnatural' math?
Real-world objects have inertia and momentum — when you push a door it doesn't stop instantly; it overshoots slightly and damps. CSS animations without overshoot easings feel computer-generated; with overshoot easings they feel physical. Apple, Linear, Stripe, Vercel all ship spring-like easings on their interactive elements precisely because users perceive overshoot motion as 'more polished' even when they can't articulate why. The spring physics community calls this the 'illusion of life' — borrowed from Disney animation principles.
Can I use these in JS animation libraries like Framer Motion or GSAP?
Yes — the JS export format gives you a 4-element array (e.g. [0.34, 1.56, 0.64, 1]) that Framer Motion, GSAP, anime.js, and react-spring all accept directly as a cubic-bezier easing. Framer Motion:
Why does my Y-axis go to 1.8 instead of stopping at 1?
Standard cubic-bezier curves keep Y between 0 and 1 (linear progress). Overshoot easings need Y values > 1 to produce the 'overshoot the target' effect. The generator's Y slider extends to 1.8 (and to -0.5 for recoil) so you can dial in springs and bounces. CSS itself accepts any Y value — only the X must be in [0, 1] because X represents time progression which can't go backwards. If you stay in the 0-1 Y range, you get a 'natural' easing without overshoot.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.