Cubic-Bezier Easing Generator
Drag the two control points on the graph to shape a custom cubic-bezier() timing function, with a moving preview dot showing exactly how the easing feels — start from a common preset (ease, ease-in-out, back) or design one from scratch.
P1: (0.25, 0.10)P2: (0.25, 1.00)
How to use
- Drag the two control point handles on the graph, or click a preset to start from.
- Watch the preview dot to see how the curve affects motion.
- Copy the generated cubic-bezier() value into any CSS transition or animation-timing-function.
FAQ
Why can control points go above 1 or below 0?
That's what produces overshoot/bounce effects (like the "back" preset) — the eased value briefly exceeds its target before settling, which is valid and common in cubic-bezier easings.
Can the curve's start and end points move?
No — cubic-bezier() timing functions always start at (0,0) and end at (1,1) by definition; only the two control points in between are adjustable.