Free CSS Gradient Generator

Gradients are a staple of modern web design, adding depth, vibrancy, and visual interest to backgrounds, buttons, and text. But writing the complex CSS syntax for multi-stop linear or radial gradients by hand is frustrating. Our free, professional CSS Gradient Generator lets you visually design stunning gradients with up to 5 color stops and instantly provides the clean CSS code.

How to Use the Generator

1. Choose Gradient Type: Select between a **Linear** gradient (colors transition in a straight line) or a **Radial** gradient (colors radiate outwards from a central point).
2. Set Direction/Position:
   • If Linear, use the slider or number input to set the **Angle** (e.g., 90deg for left-to-right, 180deg for top-to-bottom).
   • If Radial, select the starting origin **Position** from the dropdown menu (e.g., Center, Top Left).
3. Customize Color Stops: The tool starts with two colors. Click the color squares to pick your colors. Use the sliders next to them to adjust the percentage position where that color should be purest.
4. Add More Colors: Need a complex effect? Click the checkboxes next to Stops 3, 4, and 5 to enable them. You can have up to five distinct colors in a single gradient.
5. Copy the Code: The live preview updates instantly. Once you are happy with the result, click the blue "Copy CSS" button to get the exact code to paste into your stylesheet.