Cubic Bezier Easing Editor
Design the perfect CSS easing curve by dragging the two control points on the grid. The ball preview plays your exact curve — adjust the duration, loop it, then copy a ready-to-paste snippet.
Drag the purple handles (works with mouse and touch). The curve always runs from the bottom-left to the top-right.
Current curve
cubic-bezier(0.25, 0.1, 0.25, 1)
Presets
Preview
Copy CSS snippets
Use it like:
<div class="ease-[cubic-bezier(0.25,0.1,0.25,1)]">How to use
- Drag the two purple control points on the grid — the curve, the readout and all three snippets update instantly.
- Watch the ball preview: it animates along the track using your exact curve. Change the Duration slider (0.2 to 5 seconds) or toggle Loop off to play it once.
- Try the Presets (Linear, Ease, Ease In, Ease Out, Ease In Out, Snappy) as starting points.
- Copy the snippet you need and paste it into your CSS or Tailwind class list.
About cubic-bezier
The CSS cubic-bezier(x1, y1, x2, y2) function defines an easing curve between two keyframes. The x values (time) must stay between 0 and 1; the y values (progress) may go below 0 or above 1 to create overshoot and anticipation effects. The four numbers in the readout are rounded to three decimals for clean, copy-ready code.