CSS cubic Bezier editor
Preview easing curves and export timing functions.
How to use CSS cubic Bezier editor
CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.
- Enter the requested values in the settings panel.
- Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
- Run css cubic bezier editor, review the output, then use the available copy or download controls.
What this tool supports
Preview easing curves and export timing functions.
- Control x1
- Range: 0 to 1
- Control y1
- Range: -3 to 3
- Control x2
- Range: 0 to 1
- Control y2
- Range: -3 to 3
- Preview duration (seconds)
- Range: 0.1 to 10
Limits and processing
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.
Frequently asked questions
Why are the x values limited to 0 to 1 in cubic-bezier?
CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.
How do I make a bounce or overshoot easing curve?
Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.
Does the easing preview respect reduced motion settings?
Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.