Key takeaways
- 01Drag the two control-point handles to sculpt the easing curve visually rather than guessing numeric values.
- 02A live ball animation plays back the timing so you can feel the motion before committing to it.
- 03All five CSS built-in presets (ease, linear, ease-in, ease-out, ease-in-out) are available as starting points.
- 04The cubic-bezier() value updates live with two-decimal precision, ready to paste into any CSS property.
Why Custom Easing Curves Matter for UI Motion
CSS's built-in timing functions — ease, ease-in-out, linear — cover a lot of ground, but every UI has moments where the default feels slightly wrong. A tooltip that appears too snappily, a modal that overshoots on open, a progress bar that feels mechanical. Cubic-bezier curves let you tune motion to feel natural rather than mechanical, but the four numbers in cubic-bezier(0.4, 0, 0.2, 1) are nearly impossible to reason about directly.
Handytool's cubic-bezier editor turns those numbers into a visual curve with two draggable handles. Move a handle and the ball animation plays back immediately, so you can iterate by feel until the motion matches your intent. Then copy the value and drop it into your CSS — done.
How to Design a CSS Easing Curve
- 01
Start from a preset
Select ease, linear, ease-in, ease-out, or ease-in-out as a baseline. The handles snap to the correct positions for each preset.
- 02
Drag the control point handles
Each handle controls one end of the curve — the start handle shapes the initial acceleration, the end handle shapes the final deceleration. Moving a handle switches the preset to 'custom' automatically.
- 03
Watch the ball animation
A ball animates from left to right using your curve. Adjust the duration slider to preview slow vs fast transitions.
- 04
Experiment with overshoot
Drag a Y-axis handle above 1 or below 0 to create overshoot and undershoot — the 'bouncy' effect that makes a menu snap open energetically.
- 05
Copy the CSS value
Click Copy to grab the cubic-bezier() string and paste it into transition-timing-function or animation-timing-function in your stylesheet.
Runs Entirely in Your Browser
The editor is a self-contained browser tool — no fonts, no scripts, and no data are loaded after the page opens. Dragging handles and previewing animations works offline. The cubic-bezier formula used for the preview ball is the same one browsers use for CSS transitions, so what you see in the editor is exactly what your stylesheet will produce.
There's nothing to install and nothing to sign up for. The output is a single CSS value — paste it and you're done.
Cubic-Bezier Editor FAQ
What is a cubic-bezier easing curve?
It's a mathematical curve defined by two control points that determines how a CSS transition or animation accelerates over time. The four numbers in cubic-bezier(x1, y1, x2, y2) set the positions of those control points.
Why can the Y values go above 1 or below 0?
Y values outside 0–1 produce overshoot and undershoot — the curve goes past its endpoint before settling. This creates 'bouncy' easing curves. The X values must stay in 0–1.
How do I use the output?
Copy the cubic-bezier(...) string and paste it into any CSS transition-timing-function or animation-timing-function value. It works in every modern browser.
What does ease-in-out actually mean?
Ease-in-out starts slow, accelerates in the middle, and slows down at the end — cubic-bezier(0.42, 0, 0.58, 1). It mirrors how real objects accelerate and decelerate and is the default choice for most polished UI motion.
Is the ball animation preview accurate to CSS?
Yes — the preview uses the same cubic bezier formula browsers apply to CSS transitions. The duration slider lets you feel slow vs fast curves before committing.