CSS Easing Visualizer

cubic-bezier editor

cubic-bezier(0.25, 0.1, 0.25, 1)

The CSS Easing Visualizer helps you create, test, and refine cubic-bezier() timing functions for CSS transitions. Adjust all four control points, set the duration, and preview the motion instantly.

P1 (x1, y1)

P2 (x2, y2)

curve

x1 y1 x2 y2

Animated preview

Duration (ms) 0.8s

Quick presets

How to read a cubic-bezier curve

x1 and x2 must be between 0 and 1 for a valid time progression.
y1 and y2 can go beyond 0-1 to create overshoot or stronger acceleration effects.
Compare presets to find the right motion feel for each UI component.

Use this visualizer for micro-interactions, hover effects, panel openings, and state transitions while keeping motion design consistent.