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.
Presets
Preview
Copy CSS snippets
<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.
Frequently Asked Questions (FAQ)
What does the Cubic Bezier Easing Editor do?
It lets you design a CSS cubic-bezier easing curve by dragging two control points on a 1x1 grid. A ball animates along a track with your exact curve so you can preview it live.
What do the four numbers mean?
They are the x1, y1, x2, y2 control points of the CSS cubic-bezier() function. The readout updates live as you drag, rounded to three decimals.
Which CSS snippets can I copy?
Three ready-to-paste snippets: transition-timing-function, animation-timing-function, and a Tailwind CSS arbitrary value.
What are the limits on the control points?
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.
Does it work on touch screens?
Yes. The control points can be dragged with both mouse and touch.