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

Material Design Standard 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.4, y1=0, x2=0.2, y2=1 already loaded — the standard easing curve published in Google's Material Design motion guidelines. Drag either handle or edit the numbers, and the curve, the live preview and the copyable CSS update together.

Material Design calls this curve "standard easing" and recommends it for most on-screen transitions — elements that are already visible and simply moving, resizing or fading within the same screen. Its shape accelerates quickly, then decelerates gently into place, which is why so many Android apps and Material-styled web UIs share the same transition feel without anyone noticing they're using the same four numbers.

Drop it straight into transition-timing-function or animation-timing-function for a Material-consistent feel, or use it as a reference point: Material's guidelines also define separate "decelerate" and "accelerate" curves for elements entering or leaving the screen, which this single standard curve is not meant to replace.

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