How to Create a CSS Gradient
Step-by-step guide to building linear and radial CSS gradients visually using the DevHexLab CSS Gradient Generator.
Tool Used
CSS Gradient Generator
1
Open the CSS Gradient Generator
Navigate to /tools/css/css-gradient-generator.
2
Choose the gradient type
Select linear gradient (color flows in one direction) or radial gradient (color radiates from a center point).
3
Set colors and stops
Pick the colors for each stop and drag the stops to adjust where each color begins and ends. Add more stops for complex multi-color gradients.
4
Copy the CSS
Click Copy CSS to grab the ready-to-paste CSS property with cross-browser vendor prefixes included.
All done!
You are ready to use CSS Gradient Generator like a pro.