Cubic Bezier Generator

Design, import and compare CSS cubic-bezier easing with an arbitrary second curve, real browser previews, a named local library, portable share state, implementation outputs and sampled motion evidence.

Cubic Bezier Motion Studio

Design one CSS easing, compare it against any second curve, test real browser motion, import existing syntax, and carry the result into CSS, Web Animations, Tailwind, Framer Motion, design tokens or a modern linear() approximation.

32 presetsDrag + keyboardCustom A/B comparePaste existing CSSNamed local libraryPortable share stateCSV evidenceNo upload

Y view

Curve A · P1X is CSS-constrained to 0–1; Y may overshoot.

X1Y1

Curve A · P2Typed Y is not silently clamped to the graph box.

X2Y2

Paste an existing curve, CSS declaration, Tailwind value, or four-value array

Curve B · arbitrary comparator

Preset referencePaste custom B

—

Real CSS side-by-side preview

Curve A

Curve B

Duration (ms)

—Curve A timing function

—A progress at 50% time

—A overshoot / anticipation

—A peak progress speed

—A first reaches 90%

—B progress at 50% time

—A vs B max lead / lag

—signed A−B progress area

Token name

Checking linear() support…

Named curve library

Stored only in this browser. Export JSON before clearing browser storage.

Save Curve A as

Curve A is editable; Curve B is a comparison reference. Nothing is uploaded.

Use easing as an implementation decision, not a decorative number

The Studio keeps design, comparison, accessibility and code handoff in one workflow so a visually pleasant curve can still be reviewed before it ships.

X must stay in 0–1CSS requires X1 and X2 within the time interval. Y may go below 0 or above 1, so the graph auto-scales instead of silently pretending overshoot does not exist.

Compare two real curvesA built-in keyword is not always the relevant baseline. Paste any second cubic-bezier value or load a saved curve into B and inspect midpoint, lead/lag and signed progress difference.

Entrance vs exitDecelerating curves often suit arriving elements; accelerating curves often suit exits. Compare at the real duration because the same easing can feel different at 150 ms and 700 ms.

cubic-bezier vs linear()A single cubic Bezier is excellent for continuous acceleration/deceleration and modest overshoot. Multi-rebound or complex sampled motion is better represented with modern linear() or keyframes.

Reduced motionMotion preferences are part of implementation quality. The output tab includes a conservative reduced-motion helper, while preview animation is suppressed when the current browser requests reduced motion.

Library and handoffName reusable curves, export the local library, share an A/B state by URL, or export a 21-row CSV so design review can discuss the same sampled motion rather than screenshots alone.

From pasted easing to production-ready comparison

Paste an existing cubic-bezier() value, CSS declaration, Tailwind arbitrary easing, or four-number array into Curve A. Use Curve B for a real alternative rather than a fixed linear reference, then replay move, scale, fade or rotate motion at the duration you actually plan to use.

What the metrics mean

Midpoint progress shows how far the animation has advanced halfway through time. Lead/lag samples Curve A against Curve B across the full 0–1 time interval. Peak progress speed is a numerical diagnostic, not a physical velocity measurement.

Output boundaries

The linear() tab is a 21-stop sampled approximation of the current cubic curve, useful when a modern linear easing is needed but not a reason to replace a valid cubic-bezier. Test browser support and real component behavior before production.

Privacy

Editing and saved libraries stay in the browser. A copied share link embeds the selected curves and settings in its URL, so treat the link itself as shareable data.