CSS Cubic-Bezier Generator

Craft custom CSS transition curves, preview spring overshoots, and compare animations in real time.

CSS Cubic-Bezier Curve Animator & Generator

Fine-tune transition timing functions with live side-by-side animation comparisons.

Animation Curve Presets

Control Points: P1 (0.42, 0.00) & P2 (0.58, 1.00)

P1 X: 0.42

P1 Y: 0.00

P2 X: 0.58

P2 Y: 1.00

Live Motion Comparison

Your Curve: cubic-bezier(0.42, 0.00, 0.58, 1.00)

Standard Linear

CSS Function

transition: all 0.7s cubic-bezier(0.42, 0.00, 0.58, 1.00);

How Cubic-Bezier Timing Functions Work

Natural motion in the physical world is never linear. Real objects accelerate smoothly, experience momentum, and decelerate gradually due to friction. Using custom cubic-bezier curves transforms rigid web interfaces into fluid, organic user experiences.

Syntax Definition

transition-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);

Web Animation Scenarios

✓
Snappy Micro-Interactions
Give buttons, dropdown menus, and modal dialogs a native iOS/macOS fluid spring feel with slight overshoot bezier curves.
✓
Hero Element Entrance Transitions
Craft custom deceleration curves that start fast and ease smoothly into place without robotic linear motion.
✓
Bouncy Notification Alerts
Configure Y-axis values greater than 1.0 to produce playful physical bounce-back effects for toast messages and badges.
✓
Design System Timing Standardization
Standardize custom transition-timing-function tokens across your Figma and Tailwind design token libraries.

Key Tool Features

✓

Side-by-Side Motion Comparison

Compare your custom cubic-bezier curve against standard browser linear motion simultaneously.

✓

Overshoot & Bounce Coordinate Support

Supports Y values below 0.0 and above 1.0 to generate anticipation anticipation and elastic recoil effects.

✓

Handy Easing Presets Library

One-click loading for popular easing curves including Fast Out Slow In, Bouncy Overshoot, and Snappy Pop.

✓

1-Click CSS Export

Copy raw `cubic-bezier(x1, y1, x2, y2)` parameters ready to paste directly into your stylesheet.

Frequently Asked Questions

What is a cubic-bezier timing function?

A cubic-bezier function defines a smooth mathematical curve used in CSS transitions and animations. It specifies four coordinates (P1x, P1y, P2x, P2y) between 0,0 and 1,1 to dictate how acceleration and velocity change over the duration of an animation.

Can cubic-bezier values exceed 1.0 or fall below 0.0?

The X values (time) must always stay strictly between 0.0 and 1.0 because time cannot move backward. However, the Y values (progression/output) can exceed 1.0 (to create overshoot/bounce effects) or fall below 0.0 (to create anticipation recoil).

How does cubic-bezier differ from standard 'ease' or 'linear'?

`linear` moves at a constant, robotic speed. Standard `ease` accelerates slightly and slows at the end. A custom `cubic-bezier` allows you to craft dramatic deceleration curves, snappy pops, or elastic spring dynamics that match your exact brand identity.