How to Generate a CSS Color Gradient
Step-by-step guide to creating linear and radial gradients visually and copying the CSS using the DevHexLab Gradient Generator.
Tool Used
Gradient Generator
1
Open the Gradient Generator
Navigate to /tools/color/gradient-generator.
2
Choose your colors
Pick the start and end colors using the color pickers. You can also add additional color stops in between for multi-color gradients.
3
Set direction and type
Choose linear or radial gradient and set the angle or position. The preview updates live so you can see exactly how the gradient looks.
4
Copy the CSS
Click Copy CSS to grab the ready-to-use CSS gradient property. Paste it directly into your stylesheet.
All done!
You are ready to use Gradient Generator like a pro.