CSS Gradient Maker
Preview a linear or radial gradient and copy a CSS background declaration.
How to use
Choose a linear or radial gradient.
Set two to five HEX colors and adjust the linear angle if needed.
Copy or download the generated CSS.
FAQ
How do I use this tool?
Choose a linear or radial gradient. Set two to five HEX colors and adjust the linear angle if needed. Copy or download the generated CSS.
How are color stops spaced?
Color stops are distributed evenly from 0% to 100%. A radial gradient uses a centered circle.
Can I use transparent colors?
This editor accepts three- or six-digit opaque HEX colors. Transparency and custom stop positions can be added by editing the exported CSS.
Are my inputs uploaded?
Tool inputs are processed in your browser. Advertising makes separate requests as described in the privacy policy.