All tools · 🎨 Design
〰️ Cubic Bézier Editor
Design custom CSS easing functions visually. Drag the two control points to shape the curve — see the resulting animation on a live demo ball. Copy the cubic-bezier(x1, y1, x2, y2) value.
Examples
cubic-bezier(0.25, 0.1, 0.25, 1)cubic-bezier(0, 0, 0.2, 1)cubic-bezier(0.34, 1.56, 0.64, 1)Frequently asked questions
Why use cubic-bezier instead of "ease"?
Custom bezier curves let you fine-tune feel — snappier ease-outs, slow-then-fast acceleration, overshoot for "spring" effects. Keywords (ease, ease-in, ease-out) are just preset bezier curves.
What does it mean if Y goes below 0 or above 1?
The animation overshoots its endpoint or undershoots its start. Great for bouncy spring effects. Values like cubic-bezier(0.5, 1.6, ...) create overshoot.
How long should animations be?
Most UI motion is 200-400ms. Modal entrances: 300ms. Hovers: 150ms. Page transitions: 400-600ms. Longer feels slow; shorter feels janky.
About this tool
Cubic Bézier Editor runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 🎛️ CSS Filter Generator — Combine blur, brightness, contrast, grayscale, sepia, hue-rotate, drop-shadow.
- 🟫 Border Radius Generator — Generate CSS border-radius with per-corner control. Live preview.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |