⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

Bounce-Style CSS Easing Curve

Design a custom CSS cubic-bezier() timing function by dragging two control points, preview it live against a linear reference, then copy the ready value.

Drag the orange handle (P1) and the red handle (P2) to reshape the curve — arrow keys work too. X stays clamped between 0 and 1 as CSS requires; drag a handle above or below the box to send y past that range for overshoot and bounce effects.

Your curve

Linear (for comparison)

Processing... 0%

Result

This page opens the generator with x1=0.68, y1=-0.55, x2=0.265, y2=1.55 already loaded — an overshoot curve some easing libraries label easeOutBack. The negative y1 and the y2 above 1 are exactly why the animation preview below pulls back past its start and past its end before settling; drag either handle or edit the numbers to make the effect stronger or gentler.

Being honest about what this is: a single cubic-bezier() curve has only two control points, so it can approximate one overshoot-and-settle motion, not a genuine multi-bounce physical bounce with several diminishing hops. For a literal ball-bounce effect you'd need multiple keyframes or steps() segments chained together — this curve is the closest a plain transition-timing-function can get in one line.

That single overshoot is still exactly what most bouncy UI wants: a button that pops slightly past its resting size, a modal that overshoots before settling, a card that springs into place. Copy the value as-is for that snappy feel, or soften y1 toward 0 and y2 toward 1 to dial the overshoot back.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Draggable SVG curve editor with two handles (P1 and P2) plus editable x1/y1/x2/y2 number inputs for pixel-precise values.
  • Looping animation preview comparing your custom cubic-bezier() timing to a linear reference ball, so you can see the easing, not just read it.
  • Copyable cubic-bezier(x1, y1, x2, y2) string ready for transition-timing-function or animation-timing-function, plus preset pages for ease-in-out, bounce and Material Design's standard curve.

Key Benefits

✓ Drag either control-point handle and watch the curve, the live animation preview and the copyable CSS string all update together — no need to memorize the coordinate math.
✓ Y can overshoot past 0 and 1 for spring and bounce effects while X stays clamped to the 0–1 range CSS actually requires, so every value you copy is valid the moment you paste it.
✓ The side-by-side preview races your custom curve against a plain linear reference so the difference in motion feel — the entire reason to use easing — is obvious at a glance, not just a code output.

Use Cases

  • • Do you need a custom CSS transition-timing-function or animation-timing-function value instead of one of the built-in ease keywords?
  • • Do you want to see exactly what cubic-bezier(0.42, 0, 0.58, 1) — the real numbers behind CSS's own ease-in-out keyword — looks like in motion before you ship it?
  • • Are you building a bouncy button, modal or card animation and need a ready overshoot easing curve to copy straight into your stylesheet?