cubic-bezier() Editor

Drag a curve to build a CSS cubic-bezier() easing with live preview

Drag the control points to shape a CSS cubic-bezier() easing curve, try presets, and watch a live animation preview. Copy the timing function when it feels right. Everything runs in your browser.

P1: (0.25, 0.1)P2: (0.25, 1)

Live easing preview (loops).

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Related Tools

Box-Shadow Generator Build CSS box-shadows visually with layered shadows CSS clamp() Calculator Generate fluid clamp() font sizes Border-Radius Generator Round corners visually and copy the CSS Flexbox & Grid Playground Build Flexbox and CSS Grid layouts visually

Get weekly dev tools and tips