CSS Cubic Bezier Generator

About CSS Cubic Bezier Generator

How CSS Cubic Bezier Curves Work

A cubic bezier curve maps time (x-axis, 0 to 1) to animation progress (y-axis, 0 to 1). The curve is defined by four points: P0 (0,0) is the start, P1 (x1,y1) is the first control handle, P2 (x2,y2) is the second control handle, and P3 (1,1) is the end. In CSS, the syntax is cubic-bezier(x1, y1, x2, y2) - you only specify the two control handles because the start and end points are always fixed.

The mathematical foundation comes from Pierre Bezier's work at Renault in the 1960s, originally developed for car body design. The same curve type now drives every CSS transition on the web. The W3C CSS Easing Functions Module Level 2 specification (currently in Working Draft as of August 2024) formally defines cubic-bezier() as part of the easing-function type.

Parameter	Range	What It Controls
x1	0 to 1	Horizontal position of first control point (time)
y1	Any (can exceed 0-1)	Vertical position of first control point (progress)
x2	0 to 1	Horizontal position of second control point (time)
y2	Any (can exceed 0-1)	Vertical position of second control point (progress)

The x values must stay between 0 and 1 because time cannot go backwards, but y values can go below 0 or above 1. Values outside the 0-1 range on the y-axis create overshoot and bounce effects - the element temporarily moves past its target before settling into its final position.

Worked example: Suppose you set cubic-bezier(0.25, 0.1, 0.25, 1.0) on a 400ms transition moving a box 200px to the right. At t=0ms, the box is at 0px. The first handle (0.25, 0.1) means by 25% of the duration (100ms), progress is only about 10% (20px) - a slow start. The second handle (0.25, 1.0) means by the 25% mark, the curve is already heading toward 100% progress, so the middle section speeds up dramatically. By t=300ms, the box has covered roughly 180px. The final stretch from 300ms to 400ms eases gently to rest at 200px. This particular curve is the CSS ease default.

CSS Built-in Easing Keywords

CSS defines five named easing keywords, each mapping to a specific cubic-bezier() value. These are defined in the W3C CSS Easing Functions specification and supported by every modern browser.

Keyword	Cubic Bezier Equivalent	Feel	Best For
linear	cubic-bezier(0, 0, 1, 1)	Constant speed	Progress bars, colour transitions
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	Slow start, fast middle, slow end	Default CSS transition (most natural)
ease-in	cubic-bezier(0.42, 0, 1, 1)	Slow start, accelerating	Elements leaving the viewport
ease-out	cubic-bezier(0, 0, 0.58, 1)	Fast start, decelerating	Elements entering the viewport
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)	Slow at both ends	Elements moving between positions

The ease keyword is the default when no timing function is specified. Most developers never change it, but custom curves can make a significant difference to how polished an interface feels.

Popular Custom Easing Curves

Beyond the five CSS keywords, several well-known easing curves have become industry standards through frameworks and design systems.

Name	Values	Effect
ease-in-back	cubic-bezier(0.6, -0.28, 0.74, 0.05)	Pulls back slightly before moving forward
ease-out-back	cubic-bezier(0.18, 0.89, 0.32, 1.28)	Overshoots the target, then settles
ease-in-out-back	cubic-bezier(0.68, -0.55, 0.27, 1.55)	Pulls back at start and overshoots at end
ease-out-circ	cubic-bezier(0.08, 0.82, 0.17, 1)	Snappy deceleration (circular curve)
ease-in-expo	cubic-bezier(0.95, 0.05, 0.8, 0.04)	Almost static, then rapid acceleration
ease-out-expo	cubic-bezier(0.19, 1, 0.22, 1)	Fast start, very gradual stop

Material Design Easing Curves

Google's Material Design system defines three core easing curves used across Android, Flutter, and Material UI for web. These are documented in the Material Design 3 motion tokens specification.

Material Token	Cubic Bezier Value	When to Use
Standard (emphasized)	cubic-bezier(0.4, 0, 0.2, 1)	Most transitions - objects moving between positions on screen
Decelerate (incoming)	cubic-bezier(0, 0, 0.2, 1)	Elements entering the screen - fast start, gentle stop
Accelerate (outgoing)	cubic-bezier(0.4, 0, 1, 1)	Elements leaving the screen - slow start, fast exit

Material Design 3 Expressive (announced in 2025) introduced a physics-informed motion system with spring-based animations for interactive elements like buttons and cards. These spring curves approximate well with cubic-bezier values but are increasingly implemented via the Web Animations API for finer control.

How to Choose the Right Easing

Picking the wrong easing curve is one of the most common animation mistakes. Elements that enter the screen should decelerate (ease-out), because the user expects them to arrive and settle. Elements leaving should accelerate (ease-in), because they are moving away. Elements changing position in place should ease-in-out, with symmetric acceleration and deceleration.

Animation Type	Recommended Easing	Why
Element entering (fade in, slide in)	ease-out or decelerate	Arrives fast, settles into place naturally
Element leaving (fade out, slide out)	ease-in or accelerate	Starts slow, accelerates away
Element moving between positions	ease-in-out or standard	Smooth acceleration and deceleration
Hover effects	ease or ease-out	Responsive feel without being jarring
Colour/opacity changes	linear or ease	Smooth gradual transition
Playful/bouncy UI	ease-out-back	Overshoot adds personality
Progress indicators	linear	Constant speed feels predictable

Apple's Human Interface Guidelines recommend keeping animations "quick and precise" - brief animations with clear easing feel lightweight and less intrusive. Google's Material Design 3 recommends 200-300ms for most transitions, with easing curves that match the physical metaphor of the motion.

Performance Considerations

CSS transitions using cubic-bezier() are hardware-accelerated when applied to transform and opacity properties. These animations run on the browser's compositor thread, meaning they stay smooth at 60fps even when the main thread is busy with JavaScript. Per MDN's performance documentation, this is the single biggest reason to prefer CSS transitions over JavaScript-driven animation for simple movements.

Animating layout properties like width, height, margin, or padding forces the browser to recalculate layout on every frame, which is much more expensive. The easing curve itself has no performance cost - a complex cubic-bezier with overshoot runs just as fast as a simple ease-out. The cost is entirely in what property is being animated.

For reference, a 60fps animation budget gives each frame about 16.7ms. Compositor-thread animations (transform, opacity) easily hit this target. Main-thread animations (anything triggering layout or paint) often cannot, especially on mobile devices.

Accessibility and Reduced Motion

WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions, AAA level) requires that motion triggered by user interaction can be disabled. Users with vestibular disorders can experience dizziness and nausea from on-screen animation. The prefers-reduced-motion media query lets sites detect when a user has requested minimal animation in their operating system settings.

When implementing custom easing curves, always include a reduced-motion fallback:

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

This doesn't remove transitions entirely (which can be disorienting) but makes them near-instant, preserving the state change without the motion.

Easing Beyond Cubic Bezier

Cubic bezier handles most animation needs, but the CSS Easing Functions Level 2 spec introduced two additional function types for more complex motion.

CSS Feature	What It Adds	Browser Support
cubic-bezier()	Smooth curves with two control points	All browsers
steps()	Discrete step transitions (frame-by-frame)	All browsers
linear() function	Multi-point linear easing (complex curves)	Chrome 113+, Firefox 112+, Safari 17.2+

The CSS linear() function (not the same as the linear keyword) landed in all major browsers by December 2023 and reaches Baseline Widely Available status in June 2026. It accepts an arbitrary number of points, enabling spring, bounce, and elastic effects that cubic-bezier cannot produce. However, cubic-bezier remains the right choice for the vast majority of UI transitions because it is simpler to reason about and has universal browser support going back over a decade.

Common Mistakes to Avoid

Using ease-in for elements entering the screen is the most frequent error. It sounds right ("ease in" = "come in gently"), but ease-in means slow at the start, which makes entering elements feel sluggish. Use ease-out for entrances instead - the element arrives quickly and settles naturally.

Setting transitions longer than 400ms on interactive elements makes an interface feel unresponsive. Most hover effects should be 150-250ms. Only large-scale movements (page transitions, modal entrances) justify durations above 300ms. A good rule of thumb: if the user triggered the action, keep it under 300ms. If the system triggered it (a notification sliding in), you have more leeway.

Applying transitions to the all keyword is convenient but wasteful - it transitions properties that don't need it (like background on hover, which triggers unnecessary paint). Specify only the properties that should animate: transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out;

Another common issue is forgetting that different properties can have different easing curves. A tooltip fading in might use ease-out for its opacity (quick fade) but ease-in-out for its transform (smooth positional slide). Mixing timing functions per property creates more natural-feeling motion.

To apply custom easing to loading spinners, try the CSS Loader Generator. For depth effects that pair well with animated elements, the CSS Box Shadow Generator creates box shadows with live preview. To generate smooth colour transitions behind animated content, the CSS Gradient Generator builds CSS gradients visually.

Sources

• W3C - CSS Easing Functions Module Level 2 (Editor's Draft)
• MDN - cubic-bezier() CSS Function
• Material Design 3 - Easing and Duration Tokens
• MDN - CSS and JavaScript Animation Performance
• W3C WCAG 2.1 - Success Criterion 2.3.3: Animation from Interactions
• Apple Human Interface Guidelines - Motion