CSS Cubic-Bezier Editor

About this tool

Draggable easing curve editor

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

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);

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 typical UI transitions (drawer slides, modal opens); Material standard for material-design alignment; back-out for playful overshoot effects.

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. Compatible with all modern browsers + IE10+.

Cubic-bezier — the math of natural-feeling animation

CSS animations + transitions don\'t move at constant speed by default — they ease. The easing curve determines whether motion feels mechanical (linear), natural (ease-in-out), playful (back, bounce), or anticipatory (sharp ease-out). The standard mechanism: cubic-bezier(x1, y1, x2, y2), defining a parametric curve from (0,0) to (1,1) with two control points. The browser uses this curve to interpolate animation progress over time. The math, defined in CSS Animations Level 1, is simple Bezier-curve evaluation; the design problem is choosing values that feel right — much harder than you\'d think. Most designers default to ease-out without exploring further. Direct visual editing (this tool) opens up the curve design space.

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

CSS defines five built-in easings: linear, ease, ease-in, ease-out, ease-in-out. All can be expressed as cubic-beziers. ease = cubic-bezier(0.25, 0.1, 0.25, 1) (CSS default — gentle start, quick end). ease-in = cubic-bezier(0.42, 0, 1, 1) (slow start, linear end). ease-out = cubic-bezier(0, 0, 0.58, 1) (linear start, slow end). ease-in-out = cubic-bezier(0.42, 0, 0.58, 1) (slow at both ends). Modern UX best practice prefers ease-out over ease + ease-in: ease-out feels responsive (fast initial movement, gentle deceleration) — matches real-world physics. The built-ins are starting points: production UIs often benefit from custom cubic-bezier values that match the brand\'s feel.

Most designers default to ease-out. The cubic-bezier design space is enormous — playful, dramatic, snappy, languorous curves all live there. Direct visual editing opens it up.

Material Design + Apple HIG easing systems

Two design systems formalise easing curves for consistency across UIs. Material Design 3: defines "standard", "emphasized", and "linear" curves with separate "enter" + "exit" variants. Standard = cubic-bezier(0.4, 0, 0.2, 1); Decelerate (enter) = cubic-bezier(0, 0, 0.2, 1); Accelerate (exit) = cubic-bezier(0.4, 0, 1, 1). Apple HIG: doesn\'t publish exact values but uses similar deceleration curves throughout iOS + macOS animations. Apple\'s "spring" animations use physics-based simulation rather than cubic-bezier — distinct paradigm. For Web: most teams use Material Design tokens because they\'re publicly documented + battle-tested. The presets in this tool include Material standard/decelerate/accelerate.

Y values outside 0-1 — overshoot + bounce

The cubic-bezier specification allows Y values outside 0-1. This creates overshoot (animation goes past the target then comes back, e.g., back-out: cubic-bezier(0.34, 1.56, 0.64, 1)) and anticipation (animation goes backward first, e.g., back-in). Combined: bounce effects. Use sparingly: overshoot adds personality but can feel gimmicky in serious UIs (banking, healthcare, enterprise). Use for: playful brand-driven products, casual games, fun consumer apps. Avoid for: critical workflows, accessibility-first designs (some users find overshoot distracting or vestibular-disruptive). Most CSS animation libraries (GSAP, Motion One, Framer Motion) provide back/bounce easing presets that build on these cubic-bezier values.

10 Things to Know About Cubic-Bezier

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

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

ease-out = cubic-bezier(0, 0, 0.58, 1). Most natural-feeling default for UI transitions.

Material standard = cubic-bezier(0.4, 0, 0.2, 1). Google\'s canonical UI motion curve.

Y values outside 0-1 allowed for overshoot + bounce. e.g., back-out uses Y > 1 mid-curve.

Apple iOS prefers physics-based "spring" animations over cubic-bezier — different paradigm.

Linear animations feel mechanical — almost always wrong for UI; reserved for spinners + progress bars.

Overshoot easings feel playful but can be vestibular-disruptive for some users. Use sparingly.

Material 3 splits easing into enter (decelerate) + exit (accelerate) variants for separated motion semantics.

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

Frequently Asked Questions

Ease-out matches real-world physics: things start moving fast (impulse), then slow as they approach their destination (friction, air resistance). UI elements that appear should ease-out — they feel like they\'re settling into place. UI elements that disappear should ease-in — they accelerate away. Ease-in-out feels artificial for short animations because it spends most of the time at full speed in the middle; for longer animations (300ms+) it can feel smooth.
Most UI animations: 150-300ms. Faster feels snappy + responsive (button states, hover effects: 100-150ms). Slower feels deliberate (page transitions, modal opens: 200-400ms). Above 500ms feels sluggish — users notice + lose patience. Material Design baseline: 200ms for short distances, up to 400ms for long. Test with users: animations that feel "right" on designers\' fast machines often feel slow on lower-spec user hardware.
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 + you should. Users with vestibular disorders + motion sensitivity can experience nausea + dizziness from overshoot/bounce animations. Wrap aggressive easings in @media (prefers-reduced-motion: no-preference). For users who prefer reduced motion: use very subtle linear or ease-out, or no animation at all. Accessibility-first principle: respect user preferences via the OS setting.
For simple CSS transitions + keyframe animations, native cubic-bezier is sufficient + most performant. For complex multi-stage animations, scroll-driven animations, physics-based motion, or interactive drag-to-reveal patterns: GSAP, Motion One, Framer Motion provide much more power. Rule of thumb: if you can express it with CSS transition/animation, use native. If you need keyframe sequencing, springs, or timeline scrubbing: JS library.
iOS uses physics-based spring animations (mass, stiffness, damping parameters) rather than cubic-bezier curves. Springs produce continuous motion that responds naturally to interruptions + reverses smoothly. Cubic-bezier curves are fixed-duration + don\'t adapt mid-animation. SwiftUI + iOS APIs expose spring directly; web has Framer Motion + Motion One libraries that replicate spring behaviour. For most web work, cubic-bezier is good enough; for products specifically mimicking iOS feel, consider springs.
Few cases. Spinners + progress bars: where consistent speed matters more than feel. Scrolling timelines: where time itself is the measure. Looping animations: where ease curves create unnatural stutter at restart. Almost everywhere else: linear feels robotic + mechanical. Modern UI design strongly favours non-linear easing.
For consistency, ideally 2-3 curves max across a product. Material Design defines: standard (most UI), emphasised (key transitions), and linear (timers + progress). Pick 2-3 cubic-bezier values as design tokens; use them everywhere. Mixing many bespoke curves makes the product feel inconsistent.
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.
Pair with: CSS Box Shadow Generator (RT-DEV-085) for depth styling; CSS Gradient Generator (RT-DEV-050) for backgrounds; CSS Clip-Path Generator (RT-DEV-087) for shape clipping; WCAG Contrast Checker (RT-DEV-080) for accessibility. External: cubic-bezier.com (the original visual editor); Material Design 3 motion tokens; GSAP/Motion One JS libraries for advanced animations; CSSTriggers.com for performance reference.

CSS Cubic-Bezier Editor