CSS Cubic Bezier Generator

Create and compare a custom CSS cubic-bezier timing function. Drag the two control points or enter exact values, preview the motion at a chosen duration, and copy the easing code.

Features

Interactive curve editorDrag-and-drop control pointsReal-time animation preview12 preset easing functionsCompare mode with presetsCSS code generation

CSS Cubic Bezier Generator

Curve Editor

P1 (x, y)

P2 (x, y)

Compare with preset

Animation Preview

Click play to see animation:

Hover to see transition:

Duration: 1s

CSS Output

animation-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

transition: all 1s cubic-bezier(0.25, 0.10, 0.25, 1.00);

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: slide 1s cubic-bezier(0.25, 0.10, 0.25, 1.00);
}

Preset Easing Functions

Understanding Cubic Bezier

How It Works

• P1 and P2 are control points
• X values must be between 0 and 1
• Y values can exceed 0-1 for bounce effects
• Drag control points on the canvas to adjust

Common Uses

• Smooth hover transitions
• Page scroll animations
• Modal open/close effects
• Loading animations

How to use the CSS Cubic Bezier Generator

1Choose a preset or start from the default curve.
2Drag the P1 and P2 control points or enter their numeric values.
3Set an animation duration and compare the motion preview.
4Copy the cubic-bezier function or its CSS declaration.

Common uses

Tune interface transitions and micro-interactions.
Match an animation to an existing easing curve.
Compare custom motion against common easing presets.

How the four values work

A cubic-bezier function defines two control points as x1, y1, x2, and y2. The x values represent time progression, while y values shape the rate and can create overshoot.

Frequently asked questions

Can a curve overshoot?

Yes. Y values outside the usual zero-to-one range can create overshoot or anticipation effects.

Can I enter exact values?

Yes. Use the numeric control-point fields instead of dragging.

Does the duration change the curve?

No. Duration changes how long the preview runs, while the control points define the easing shape.

Related Design Tools Tools

Box Shadow Generator

Create CSS box-shadow effects visually

CSS Gradient Generator

Create beautiful CSS gradients visually

Flexbox Generator

Visual CSS flexbox layout generator

CSS Grid Generator

Visual CSS Grid layout generator