CSS Cubic Bezier Generator

Design custom easing curves for CSS animations with a visual editor. Drag control points, compare with presets, and preview animations in real-time.

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