Design tool
CSS Gradient Generator
Pick two colors, an angle, and a linear or radial type, then copy the CSS.
Processed in your browser. The text is not sent to our servers.
How to build a CSS gradient
- Enter the two hex colors.
- Choose linear or radial, and enter an angle for a linear gradient.
- Click Build gradient, check the preview, and copy the CSS.
The output is a background property. A linear gradient uses the angle in degrees. A radial gradient uses a circle.
Frequently asked questions
Which color format should I use?
Hex colors such as #4f46c7. Three-digit hex is expanded.
Is the CSS uploaded?
No. The preview and the property are created in your browser.