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.

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