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

The Real Numbers Behind CSS ease-in-out

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 cubic-bezier generator with x1=0.42, y1=0, x2=0.58, y2=1 already loaded — the exact control points the CSS ease-in-out keyword expands to. Drag either handle, or edit the numbers directly, and the curve, the animation preview and the copyable string all update immediately.

ease-in-out is one of the five built-in CSS timing keywords, and it's popular precisely because this curve accelerates gently out of the start, holds a fairly even pace through the middle, and eases back down before the end — a shape that reads as natural for most UI motion. Seeing it as explicit control points instead of a keyword name makes it obvious why: y1 sits near 0 and y2 sits near 1, both close to their matching x, so there is no overshoot in either direction.

Use these four numbers as a starting point rather than the keyword itself whenever you need to nudge the feel slightly — pull x1 down for a snappier start, or push y2 above 1 to turn this same shape into a gentle overshoot. Every change updates the preview and the copyable cubic-bezier() line instantly.

🛡️
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?