CSS Cubic Bezier Generator (Visual Drag-to-Edit) — Spring + Bounce

cubic-bezier(0.34, 1.56, 0.64, 1)

Drag the dots to shape the curve

Live preview · 1.2s loop

Compare against CSS keywords

your curve

linear

ease

ease-in-out

Advertisement

P1(0.34, 1.56)
P2(0.64, 1.00)
Duration1.2s

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?

◐

Drag-to-design

Visual cubic-bezier editor — grab the two handles, shape the curve. Eyes are better than guessing at numbers like 0.34, 1.56, 0.64, 1.

◉

Live ball animation

Watch your curve in motion at multiple speeds. Spring overshoot, bounce, snap — they're obvious in animation, invisible in numbers.

⊞

Side-by-side comparison

Your curve runs alongside CSS keywords (linear, ease, ease-in-out) so you can SEE how it differs from defaults — not guess.

⎘

Four export formats

CSS cubic-bezier(), Tailwind config, JS array (Framer Motion / GSAP / anime.js), SCSS variable.

◇

How to design a custom easing curve

Pick a preset

Eight starting points: ease, ease-in-out, spring, bounce-out, snap, gentle. Most easings are tweaks of these classics.

Drag the handles

Two control points (P1 violet, P2 pink). P1 controls the start of the curve, P2 the end. Y values can go below 0 or above 1 for spring/bounce effects.

Watch the ball

Live preview shows your curve animating a ball across the panel. Increase duration to make subtle differences visible.

Compare

Comparison strip runs your curve next to linear, ease, and ease-in-out at the same duration. Pick the one that feels right.

Export

CSS, Tailwind, JS, or SCSS. Copy or share the URL — the cubic-bezier values encode into the link.

◫

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

Spring on hover

.button {
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.button:hover {
  transform: scale(1.06);
}

Custom easing as a CSS variable

: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);
}

Framer Motion / JS

<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.6, ease: [0.34, 1.56, 0.64, 1] }}
/>

✦

Pro tips

Y can go beyond [0, 1]

Y values above 1 give overshoot (spring), below 0 give pull-back (anticipation). X must stay in [0, 1] — those are time fractions.

Slower duration reveals subtlety

A spring at 0.2s looks identical to ease-out. The same spring at 1s reveals its overshoot. Test at the duration you'll actually ship.

Spring beats ease for interactions

Hover, tap, drag — these all feel more alive with slight overshoot (spring). Reserve symmetric ease for fades and color transitions.

One project, two easings max

Different easings for every component reads as chaos. Pick one for "responsive" (spring) and one for "subtle" (ease-out). Apply consistently.