About the CSS Gradient Generator

This free CSS gradient generator lets you create beautiful linear and radial gradients with a visual editor. Add multiple color stops, adjust the gradient angle, and see a live preview in real time. The generated CSS code is ready to copy and paste into your stylesheets. The tool produces modern CSS gradient syntax compatible with all current browsers.

How to Use

Choose between linear or radial gradient type
For linear gradients, adjust the angle using the slider
Click the color pickers to change colors at each stop
Drag the position sliders to control where each color appears
Add more color stops for complex gradients or remove stops you do not need
Copy the generated CSS code with one click