# Modern CSS Gradient Generator Guide: Linear, Radial & Conic Palettes
Subtle gradients add depth, modern aesthetics, and visual hierarchy to web applications. However, hand-coding multi-stop CSS gradients often produces "gray dead zones" when colors mix improperly in sRGB color space.
With TargetRoot's [Gradient Generator](/tools/color/gradient-generator), you can craft flawless color transitions visually and copy production CSS in one click.
---
## Types of CSS Gradients
### 1. Linear Gradients
Transitions colors along a straight line at a specified angle:
```css
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
```
### 2. Radial Gradients
Radiates outwards from a central origin or focal point, creating subtle lighting effects behind hero typography or callouts.
### 3. Conic Gradients
Rotates colors around a central point, ideal for color wheels, pie charts, and animated glowing borders. Explore our [Color Wheel Tool](/tools/color/color-wheel) for angle harmony.
---
## Pro Tip: Avoiding the Gray Mud Zone
When transitioning between two distant hues (e.g., green and magenta), the intermediate blend in standard RGB passes through a muddy gray tone.
- Add an intermediate color stop using our [Color Harmonies Tool](/tools/color/color-harmonies) to keep the transition vibrant.
Start creating gradients now with our [Gradient Generator](/tools/color/gradient-generator).
Was this article helpful?
Your feedback helps us create better content.