Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS cubic-bezier easing editor
Edit two curve control points, test the transition and export a cubic-bezier easing function.
X stays between 0 and 1. Y can overshoot. Drag controls or use arrow keys; Shift increases the step.
CSS
About this tool
Tune the acceleration or overshoot of a transition by comparing the curve with its motion preview.
How to use
Start with a common easing preset, drag the control points or enter X1, Y1, X2 and Y2. Points also support arrow keys, with Shift for larger steps. Set the preview duration and press Play; stop it whenever needed, then copy or download the CSS.
X coordinates are limited to 0–1 and Y to −2–3, allowing anticipation and overshoot. Export contains the easing declaration, not the preview duration or a complete animation. Movement is suppressed when your system requests reduced motion; editing and export remain available.
Common questions
Does the export include a complete animation?
No. It exports transition-timing-function. Set duration and animated properties in your stylesheet. Control-point x values are 0–1; y values can range from −2 to 3.
Why does Play show no movement even though the curve is valid?
The preview respects your system’s reduced-motion setting and does not play the moving animation when it is enabled. You can still edit and export the curve. Otherwise, check that the preview duration is between 100 and 5,000 ms; it affects the preview only.
Related tools
Opens in a new tab
Comments
0