CSS Cubic-Bezier Generator — free online
You want an animation to feel just right, not too fast, not too snappy. But guessing the cubic-bezier numbers by hand is a pain. We added a free tool that lets you draw the curve instead — CSS Cubic-Bezier Generator — right in your browser.
What it does
You get an interactive bezier curve with two control-point handles. Drag them around and the easing changes in real time, so you can shape exactly how your animation speeds up and slows down. When the curve feels right, you take the matching CSS value.
Nothing leaves your device
The whole thing runs in your browser. Nothing is uploaded, nothing is saved on a server. You just open the page and play with the curve.
How to use it
- Open CSS Cubic-Bezier Generator.
- Drag the two handles until the curve looks the way you want.
- Copy the cubic-bezier value and paste it into your CSS.
It's free with no limit. There are more small tools on the Apps page.