Online Tool Store
CSS Cubic Bezier Editor
Visually design a CSS cubic-bezier() timing function by dragging control points, with a live animation preview. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Drag the two blue handles to shape the curve.
How it works
- Drag the two blue handles, type exact values, or pick a preset.
- Click "Preview animation" to see the curve applied to a moving dot.
- Copy the generated `cubic-bezier()` CSS value.
FAQ
What do the four numbers mean?
cubic-bezier(x1, y1, x2, y2) defines two control points for a cubic Bézier curve between (0,0) and (1,1) — x values (0–1) represent progress through the animation's duration, y values represent the eased output, and can go outside 0–1 for overshoot/bounce effects.
Can Y values go above 1 or below 0?
Yes — that's what produces "overshoot" or "back" easing, where the animated property temporarily goes past its target value before settling, like a spring or bounce effect.
How is this different from the built-in ease keywords?
`ease`, `ease-in`, `ease-out`, and `ease-in-out` are just named shortcuts for specific cubic-bezier() values — this tool lets you start from one of those and fine-tune it, or build a custom curve from scratch.
Where do I use the generated value?
Anywhere CSS accepts a timing function — `transition-timing-function`, `animation-timing-function`, or inline in `transition: all 0.3s cubic-bezier(...)`.
How we compare
| Feature | Online Tool Store | Browser DevTools easing editor | Memorizing preset keywords |
|---|---|---|---|
| Live animation preview | ✓ | ✓ | No visual feedback |
| No DevTools panel needed | ✓ | Buried a few clicks deep | ✓ |
For quickly dialing in a custom easing curve without opening DevTools on a live page, this is faster and shareable.