New tool — Cubic-bezier easing generator
Drag the control points to craft a custom CSS easing curve, preview it live and copy the cubic-bezier value.
Following the transitions and animations guide, here’s the tool to go with it: a cubic-bezier easing generator.
What it does
- Drag the two control points to shape an easing curve from (0,0) to (1,1).
- A live preview ball runs the curve so you can feel the motion.
- Presets for the CSS keywords plus a couple of springy custom curves.
- Copy the
cubic-bezier()value or a fulltransition-timing-functiondeclaration.
Pull a control point’s y past 0 or 1 for an overshoot — that bouncy, “back” feel — then drop the value into any transition or animation. Great with the hover lift card and other animation snippets.
Now at 36 tools and 34 snippets. Browse tools, snippets, or subscribe via RSS.