Skip to main content

CSS Cubic Bezier Generator

Drag the control points to craft a custom cubic-bezier timing function, then copy it for use in CSS transitions and animations.

Runs in your browser — no data leaves your device

Presets
Curve Editor
011

P1 (0.25, 0.10)  P2 (0.25, 1.00)

Live Preview

Box animates using your timing function.

CSS Value
cubic-bezier(0.25, 0.10, 0.25, 1.00)
Full Declaration
transition-timing-function:
  cubic-bezier(0.25, 0.10, 0.25, 1.00);