CSS Cubic-Bezier Editor

ANIMATION CSS CUBIC-BEZIER EASING FRONTEND
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

Visual CSS cubic-bezier editor. Drag the control points to design custom easing curves; preview the animation in real time. Includes presets for ease, ease-in, ease-out, ease-in-out, Material Design, bounce, back, and more.

RT-DEV-086 · Developer Tools
Your browser is too old for this tool’s interactive features. Please update to Safari 13.1, Chrome or Edge 80, Firefox 74 or newer.

CSS Cubic-Bezier Editor

Presets:
Drag the purple + pink control points to shape the easing curve.
cubic-bezier(0.25, 0.10, 0.25, 1.00)
transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
animation-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
📅 Research current as of 26 Sep 2026 · Sources: CSS Easing Functions Level 1 §2.2 (cubic-bezier(), keyword equivalents, x restricted to 0–1 while y is unrestricted, which is why overshoot is legal); CSS Transforms Level 1 §8 (a percentage in translateX() resolves against the element's OWN border box — the preview animation travelled zero pixels until 26 Sep 2026 because of it); Material Design 3 motion tokens (material-foundation/material-tokens, motion.css); CSS Media Queries Level 5 §12.1 prefers-reduced-motion; WCAG 2.1 SC 2.3.3
Standards, published formulas, and reference data are revised over time — check against a current authoritative source before relying on these figures.
Advertisement
After results · AD-W1Responsive · Post-tool — peak engagement

How to use the Cubic-Bezier Editor

Start with a preset

Quick start: click any preset (ease-out, Material standard, back-out). The curve + animation preview update immediately. Common starting points: ease-out for elements that appear and settle; Material 2 standard for the curve Material Design 2 published (Material 3's tokens are different — see below); back-out for overshoot.

Drag the control points

Two handles on the curve: purple (P1) controls how the animation starts; pink (P2) controls how it ends. Drag them to shape the curve. The X axis stays in 0-1 (time); Y can extend beyond 0-1 for overshoot/bounce effects (-0.5 to 1.5 supported).

Watch the animation preview

The pink box at the right animates using your custom easing. Adjust the curve + click "Replay" to compare iterations. The visual preview is the fastest way to dial in a curve that feels right — math intuition rarely beats direct feedback.

Copy the CSS

Click "Copy CSS" to get both transition-timing-function and animation-timing-function declarations. Paste into your stylesheet. Any browser that implements CSS transitions accepts cubic-bezier(); the only invalid values are x coordinates outside 0–1 (CSS Easing Functions Level 1 §2.2), and this editor cannot produce those.

Advertisement
After how-to · AD-W2Responsive

Cubic-bezier — the math of natural-feeling animation

CSS transitions and animations do not move at constant speed by default — they ease, and the default is the ease keyword. The mechanism is cubic-bezier(x1, y1, x2, y2): a cubic Bézier curve from (0,0) to (1,1) whose shape is set by two control points, P1 = (x1, y1) and P2 = (x2, y2). The horizontal axis is input progress (time), the vertical axis output progress. CSS Easing Functions Level 1 §2.2 defines it, and adds the one hard rule this editor enforces: the x coordinates of P1 and P2 are restricted to 0–1, so you cannot drag a handle past the left or right edge of the canvas. The y coordinates are not restricted — that is what makes overshoot and anticipation possible.

The four built-in CSS easings — and why they don't go far enough

The specification gives every keyword an exact cubic-bezier() equivalent, and the presets above load those values: ease = cubic-bezier(0.25, 0.1, 0.25, 1) (the default), ease-in = cubic-bezier(0.42, 0, 1, 1), ease-out = cubic-bezier(0, 0, 0.58, 1), ease-in-out = cubic-bezier(0.42, 0, 0.58, 1), and linear = cubic-bezier(0, 0, 1, 1). The names describe the shape — ease-in starts slowly, ease-out ends slowly — and the preview shows the difference at 1.6 seconds, where it is much easier to see than at the 100–400 ms durations most interface motion actually uses.

"The x coordinates of P1 and P2 are restricted to the range [0, 1]." — CSS Easing Functions Level 1, §2.2. The y coordinates are not, which is why overshoot exists.

Which Material curves the presets are — and which they are not

The three Material presets here are the curves Material Design 2 published: standard cubic-bezier(0.4, 0, 0.2, 1), decelerate cubic-bezier(0, 0, 0.2, 1) and accelerate cubic-bezier(0.4, 0, 1, 1). Material Design 3 replaced them. Its published tokens (material-foundation/material-tokens, motion.css) are standard cubic-bezier(0.2, 0, 0, 1), standard-decelerate cubic-bezier(0, 0, 0, 1), standard-accelerate cubic-bezier(0.3, 0, 1, 1), emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1) and emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15), with duration tokens from 50 ms to 1000 ms. If you are matching a Material 3 product, type those four numbers into the presets' place by dragging — the editor will reproduce any of them, since all have x within 0–1.

Y values outside 0-1 — overshoot + bounce

Because the specification restricts only x, a y value above 1 means the output passes its target and comes back — overshoot, as in the back-out preset cubic-bezier(0.34, 1.56, 0.64, 1) — and a y below 0 means it moves backwards first — anticipation, as in bounce-out's y1 = −0.6. This editor clamps y to −0.5 … 1.5 so the handles stay on the canvas; the spec itself has no such limit. Motion that overshoots is exactly the kind WCAG 2.1 SC 2.3.3 (Animation from Interactions) asks you to let users disable, and CSS Media Queries Level 5 §12.1 gives you the switch: wrap it in @media (prefers-reduced-motion: no-preference) and fall back to a plain fade or no motion otherwise.

Where the spec clamps x, and which Material curves the presets really are

01

cubic-bezier(x1, y1, x2, y2) — defines a curve from (0,0) to (1,1) with two control points.

02

5 built-in CSS easings (linear, ease, ease-in, ease-out, ease-in-out) can all be expressed as cubic-beziers.

03

ease, not linear, is the default: CSS Easing Functions Level 1 §2.2 defines it as cubic-bezier(0.25, 0.1, 0.25, 1), and ease-out as cubic-bezier(0, 0, 0.58, 1).

04

cubic-bezier(0.4, 0, 0.2, 1) is Material Design 2's standard curve. Material 3's standard token is cubic-bezier(0.2, 0, 0, 1) — a different curve with the same name.

05

Only x is restricted to 0–1 by the spec; y may exceed it. Back-out's y1 = 1.56 is what makes the box overshoot and return.

06

This editor clamps y to −0.5 … 1.5 so both handles stay on the canvas. That is the editor's limit, not CSS's — a hand-written cubic-bezier(0.5, 3, 0.5, 1) is valid.

07

linear is itself a cubic-bezier: cubic-bezier(0, 0, 1, 1), a straight diagonal. Output progress equals input progress for every value.

08

Overshoot is motion users can be allowed to switch off: WCAG 2.1 SC 2.3.3 and the prefers-reduced-motion media feature (Media Queries Level 5 §12.1) are the standard and the switch.

09

Material 3 publishes standard-decelerate cubic-bezier(0, 0, 0, 1) for entering elements and standard-accelerate cubic-bezier(0.3, 0, 1, 1) for exiting ones, plus emphasized variants.

10

For complex multi-stage animations, use keyframes with multiple easings instead of one cubic-bezier across the whole timeline.

Frequently Asked Questions

  • Because the result would not be valid CSS. CSS Easing Functions Level 1 §2.2 restricts the x coordinates of both control points to 0–1 — x is input progress, and a curve that doubled back in time would have two outputs for one instant. The editor clamps x at the canvas edges so every value it prints is accepted by the browser. Vertical movement is different: y may go below 0 or above 1, and the editor allows −0.5 to 1.5.

  • The CSS specification sets no duration; the easing curve only shapes whatever duration you give it. For a published scale, Material Design 3's motion tokens run from 50 ms to 1000 ms in steps (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 700, 800, 900, 1000 ms), with the shorter values for small components and the longer ones for large or full-screen transitions. Whatever you choose, remember the preview here runs at 1.6 s, several times longer than any of those, so a curve that looks dramatic above will read as a nuance at 200 ms.

  • The 1.6-second preview duration is longer than typical UI animations (200-300ms). At that longer duration, easing differences are more visible — what looks dramatic over 1.6s might be barely perceptible over 200ms. Use the visual preview to compare relative differences between curves; reduce the perceived intensity when applying to real UIs.

  • Yes, and the two belong together. CSS Media Queries Level 5 §12.1 defines prefers-reduced-motion so a page can detect the operating-system setting, and WCAG 2.1 SC 2.3.3 (Animation from Interactions) asks that motion triggered by interaction can be disabled unless it is essential. Put overshoot and bounce curves inside @media (prefers-reduced-motion: no-preference), and give the reduce case a plain fade, an ease-out, or no animation at all.

  • Its first control point has a negative y: cubic-bezier(0.68, −0.6, 0.32, 1.6). Output progress dips below 0 — the box moves away from its destination — before climbing past 1 and settling. That is anticipation followed by overshoot, and it is legal because the specification restricts only the x coordinates. Drag the purple handle above the baseline to remove the anticipation and keep the overshoot.

  • Each coordinate is rounded to two decimal places for the CSS output, so a drag that lands on 0.4173 prints as 0.42. The specification puts no limit on precision — cubic-bezier(0.4173, 0, 0.2, 1) is valid — but two decimals is already finer than the eye can distinguish at interface durations, and it keeps the value readable in a code review. If you need an exact published token, type it into your stylesheet rather than dragging to it.

  • Anything where the motion represents a quantity rather than a movement: a progress bar that should advance in proportion to work done, a spinner that must rotate at constant speed, a scrolling timeline, or a looping animation where an eased restart would visibly stutter. linear is cubic-bezier(0, 0, 1, 1) — output equals input at every point — so the preset draws a straight diagonal.

  • Design systems that publish tokens keep the set small. Material Design 3's motion tokens name three families — standard, emphasized and linear — each with accelerate (exit) and decelerate (enter) variants, and every product screen draws from those. Picking two or three cubic-bezier() values, naming them as custom properties, and using nothing else is the same discipline at any scale.

  • No. All calculations run in your browser via JavaScript. Open DevTools → Network and confirm zero outbound requests. Curve data stays on your device. Safe for confidential design work.

  • No — they are Material Design 2's: standard cubic-bezier(0.4, 0, 0.2, 1), decelerate cubic-bezier(0, 0, 0.2, 1), accelerate cubic-bezier(0.4, 0, 1, 1), and the buttons are labelled "Material 2" for that reason. Material Design 3's published tokens are standard cubic-bezier(0.2, 0, 0, 1), standard-decelerate cubic-bezier(0, 0, 0, 1), standard-accelerate cubic-bezier(0.3, 0, 1, 1), emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1) and emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15). All five have x within 0–1, so you can drag the handles to any of them.

Method & sources

How it computes

Draws cubic-bezier(x1, y1, x2, y2) — the cubic Bézier easing function from (0,0) to (1,1) with control points P1 and P2 defined in CSS Easing Functions Level 1 §2.2 — on a canvas, applies the same function to a 1.6-second transform transition for the preview, and prints it as transition-timing-function and animation-timing-function. Dragging clamps x to 0–1, which the specification requires, and y to −0.5 … 1.5, which is this editor's own canvas limit (the specification allows any y).

What this tool implements

  • Keyword equivalents from CSS Easing Functions Level 1 §2.2, loaded by the presets: ease = cubic-bezier(0.25, 0.1, 0.25, 1); ease-in = (0.42, 0, 1, 1); ease-out = (0, 0, 0.58, 1); ease-in-out = (0.42, 0, 0.58, 1); linear = (0, 0, 1, 1).
  • 'The x coordinates of P1 and P2 are restricted to the range [0, 1]' (§2.2) — the editor clamps x at the canvas edges so every value it prints is valid CSS; y is unrestricted by the spec (overshoot above 1, anticipation below 0) and clamped only for display, to −0.5 … 1.5.
  • The three 'Material' presets are Material Design 2's curves — standard (0.4, 0, 0.2, 1), decelerate (0, 0, 0.2, 1), accelerate (0.4, 0, 1, 1) — and are labelled 'Material 2'. Material Design 3's tokens differ: standard (0.2, 0, 0, 1), standard-decelerate (0, 0, 0, 1), standard-accelerate (0.3, 0, 1, 1), emphasized-decelerate (0.05, 0.7, 0.1, 1), emphasized-accelerate (0.3, 0, 0.8, 0.15); the page lists them.
  • Output rounding is two decimal places; the specification sets no precision limit. The preview duration is 1.6 s, several times any Material 3 duration token (50–1000 ms), and the page says so.
  • Not produced: the step easing functions (step-start, step-end, steps(), Level 1 §2.3) and the piecewise linear() function of later drafts — this editor is cubic Bézier only.
  • Accessibility is stated, not implied: overshoot/anticipation curves are motion that WCAG 2.1 SC 2.3.3 asks to be disable-able, and Media Queries Level 5 §12.1 prefers-reduced-motion is the switch the page recommends.

Sources

What can make this go out of date

  • None at runtime — the page computes and draws locally and transmits nothing. The Material Design 3 token values quoted move with releases of material-foundation/material-tokens; they were read on 2026-09-13.

Abridged — the full review record for this tool runs longer than the list above.

Advertisement
Pre-footer · AD-W3 728 × 90