Cubic Bezier Generator

Design CSS cubic-bezier timing functions with an interactive curve editor, animation preview, and preset easings.

Curve Editor

Presets

Control Points

Animation Preview

Translate

Scale

Opacity

CSS Output

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

Ctrl+Enter to runCtrl+Shift+C to copy

Learn More

Cubic Bezier Generator: CSS Animation Easing Made Visual

Cubic bezier curves control how CSS animations feel. Learn how control points shape motion and create custom easing.

What Are Cubic Bezier Curves?

A cubic Bezier curve is a mathematical function used in CSS to define the timing of animations and transitions. Written as cubic-bezier(x1, y1, x2, y2), it describes how an animation progresses from start to finish by mapping time to progress along a smooth curve defined by four control points.

5 min readRead full guide

Related Tools

Did you know?

Password Generator

Security

Generate strong, random passwords and passphrases with customizable length, character sets, and bulk generation.

Password Generator

UUID Generator

Random Number Generator