Web Tools
CSS Easing Generator
Build custom cubic-bezier() easing functions with an interactive curve editor. Choose from 12 presets (ease, ease-in-back, elastic, snap), adjust control points, preview animations live, and copy ready-to-use CSS. Runs entirely in your browser — your data never leaves your machine.
css animation easing cubic-bezier transition design
Published May 31, 2026
All interactive tools run entirely in your browser. Your data never leaves your device.
How It Works
Select a preset or drag the control points to shape your easing curve. The tool generates the cubic-bezier() value, a full transition property, and @keyframes CSS — ready to copy into your project.
Features
- 12 presets: ease, ease-in, ease-out, ease-in-out, linear, ease-in-back, ease-out-back, ease-in-out-back, ease-in-circ, ease-out-circ, snap, elastic
- Visual curve editor: SVG preview with control point guides
- Live animation preview: see the easing applied to a moving element
- Named easing detection: detects when your curve matches a CSS keyword
- Multiple CSS outputs: cubic-bezier value, transition property, @keyframes
- Overshoot support: y values can exceed 0-1 range for bounce/elastic effects
- Private: runs entirely in the browser — no data transmitted
Use Cases
- Designing smooth UI transitions and animations
- Previewing easing curves before implementing
- Finding the right cubic-bezier values for micro-interactions
- Creating custom spring/bounce/elastic effects