CSS Cubic Bezier Generator

Cubic Bezier Documentation

What is a Cubic Bezier Curve?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS Syntax

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Common Use Cases

Animated Transitions:Create smooth animations for elements changing properties.
Scroll Effects:Control the speed of scroll animations.
Interactive Elements:Define how elements respond to user interactions like hovering or clicking.
Motion Design:Craft complex motion sequences for UI elements.

Popular Easing Functions

Ease (default)

Starts slow, accelerates quickly, and then slows down again.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Constant speed from start to end.

cubic-bezier(0, 0, 1, 1)

Ease-in

Starts slow, then accelerates.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Starts fast, then decelerates.

cubic-bezier(0, 0, 0.58, 1)

Tips for Creating Custom Curves

Keep x values between 0 and 1:Values outside this range can cause unexpected behavior.
Visualize the curve:Use the interactive graph to understand how changes affect the animation.
Test with real elements:Always preview your curve with actual UI components to ensure it feels right.
Save presets:Bookmark useful curves for future projects.