Your curve
Linear
Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Cubic Bezier Generator
Design a transition easing curve and compare it with linear motion.
- 1 Choose a preset or adjust X1, Y1, X2 and Y2 using controls or graph handles.
- 2 Set Duration and click Play animation to compare motion.
- 3 Copy the cubic-bezier value into your transition or animation timing rule.
Example and practical tips
Compare ease-in and ease-out at the same duration to choose how a panel should settle into place.
Frequently asked questions
Does the curve define animation distance?
No. It controls timing progress. Your animation properties define the distance or other visual change.
Can a curve overshoot?
Some control values produce overshooting motion. Test the full transition and consider reduced-motion preferences.
Practical guides
-
How to Use CSS Cubic Bezier Generator
Design CSS easing curves with a visual cubic-bezier editor, compare the motion with linear timing and copy the transition code. Free online tool.
Report an issue
Something broken or not quite right? Tell us and we will look into it.