Cubic Bezier Generator
Design a CSS easing curve visually, with an animated preview.
Calculated locally in your browser.
- Start from a named preset (ease, ease-in-out, back-style overshoot easings) or dial in your own.
- See the actual curve shape, not just four numbers.
- Replay an animated preview at your chosen duration before committing to a value.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Builds a CSS `cubic-bezier()` easing curve by adjusting its two control points, with a live curve diagram and an animated preview so you can see — not just read — how the timing feels.
How to use it
- 1Pick a preset or adjust the four P1/P2 X and Y values.
- 2Watch the animated preview (use Replay to run it again).
- 3Copy the `cubic-bezier()` value or the full `transition-timing-function` declaration.
Tips
- Y values can go below 0 or above 1 (unlike X, which is clamped to 0–1) — that's what produces an overshoot or anticipation effect, like the back-style presets.
Frequently asked questions
What people use it for
Give a modal or drawer a natural-feeling entranceAn ease-out or back-style curve reads as more physical than linear.
Match a motion-design specEnter the exact control-point values from a design tool's easing export.
Add a playful bounce to a button or iconThe back-style presets overshoot slightly before settling.
Standardize easing across a design systemSettle on one or two curves and reuse the copied value everywhere.
Related tools
All design toolsShadow GeneratorBuild a CSS box-shadow with live preview.CSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.Border Radius GeneratorBuild a CSS border-radius, with independent corners.CSS FormatterFormat and beautify CSS stylesheets.
Ready to use Cubic Bezier Generator?
Cubic Bezier Generator