Cubic Bezier Generator
Design a custom cubic-bezier() timing function visually, preview the motion, and copy the CSS, entirely in your browser.
Presets
Linear
Ease
Ease In
Ease Out
Ease In Out
Control Points
P1 X: 0.25
P1 Y: 0.10
P2 X: 0.25
P2 Y: 1.00
Curve Preview
Motion Preview
How to Create a Custom CSS Easing Curve for Free
1. Pick a preset to start from, or drag the four sliders to shape your own curve.
2. Watch the curve preview and the moving dot update instantly.
3. Click Play to replay the motion preview using your exact timing function.
4. Click Copy CSS to grab the ready-to-use cubic-bezier() value.
Generation in Your Browser
The curve and CSS are generated entirely in your browser from the control points you choose. Nothing is ever sent to a server.