Cubic Bezier Easing Generator
Drag the two control points to design a custom easing curve with a live animated preview showing the motion in action, plus common presets (Ease, Ease In, Ease Out, Material Standard), then copy the exact cubic-bezier CSS value.
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
Drag either point to shape the easing curve
Presets
CSS code
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
What this tool does
Builds an easing curve for CSS animation by dragging two control points, with presets for the common curves, giving you ready code.
When to use it
- An interface animation that feels mechanical and should feel natural.
- Matching an animation's feel to a particular design system.
- Understanding what an easing curve actually does to motion.
- Giving an entrance and an exit two different feels.
How to use it
- Pick from the "Presets" as a starting point.
- Drag either point to shape the easing curve.
- Copy the "CSS code".
A practical example
Input
A curve that starts slowly and finishes quickly.
Output
Cubic-bezier CSS giving the motion a sense of acceleration rather than a constant speed.
Limitations
- The easing curve affects how motion feels rather than how long it takes; duration is set separately.
- Extreme curves produce motion that reads as erratic; the presets are a safe starting point.
- Some curves overshoot the value range and produce a bounce, which is sometimes intended and sometimes not.
Privacy and processing
The curve is computed on your device and nothing is transmitted.
Technical notes
- Dragging on the curve directly is the practical difference: cubic-bezier's four numbers are hard to picture without seeing them plotted.