Cubic Bezier Generator

Create custom CSS easing functions with visual preview.

Runs 100% in your browser — your data never leaves this device

Presets

x10.25

y10.10

x20.25

y21.00

Animation Preview

CSS Value

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

Example Animation

animation: example 1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;

@keyframes example {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Cubic Bezier Generator?

Cubic bezier functions define the speed curve of CSS animations and transitions. They control how an animation accelerates and decelerates. Our generator lets you visually create custom easing curves with an interactive preview.

How to Use Cubic Bezier Generator

1. Choose a preset or create your own curve 2. Drag the control points to adjust the curve 3. Preview the animation with the demo ball 4. Copy the cubic-bezier() function

Common Use Cases

Custom animation timing
Smooth transitions
Bounce effects
Elastic animations

Frequently Asked Questions

What do the values mean?

The four values define two control points (x1, y1, x2, y2) that shape the bezier curve.

Related Tools

CSS Unit Converter

Convert between PX, REM, EM, and % CSS units instantly.

Box Shadow Generator

Create CSS box shadows with a visual editor.

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor.

Border Radius Generator

Create CSS border-radius with a visual editor.

Flexbox Generator

Create CSS flexbox layouts visually.