CSS Cubic Bezier Builder
Build custom cubic-bezier easing curves by dragging control points on a canvas. Preview the animation in real time and choose from 10 built-in presets. Copy the CSS timing function with one click.
Presets
P1 (purple)
P2 (blue)
Animation Preview
1 second · auto-loops
Current value
cubic-bezier(0.25, 0.10, 0.25, 1.00)Tips
→Drag the purple (P1) and blue (P2) handles on the canvas
→Y values beyond 0–1 create overshoot / bounce effects
→X values must stay in 0–1 (CSS spec requirement)
→Use presets as starting points, then fine-tune
How to use
Start from a preset
Pick Linear, Ease, Ease In, Out Back, or any of the 10 presets as a starting point.
Drag the handles
Click and drag the purple P1 and blue P2 circles on the canvas to shape your curve.
Preview the animation
Hit Play to see a ball animate across the screen using your exact timing function.
Copy the CSS
Copy the transition-timing-function declaration and paste it into your stylesheet.