About CSS Gradients

CSS gradients create smooth transitions between colors. They're essential for modern UI design — creating backgrounds, buttons, and visual effects without images.

Gradient Types

Linear: Colors transition along a straight line
Radial: Colors radiate from a center point
Conic: Colors rotate around a center (like a pie chart)

CSS Syntax Examples

/* Linear gradient */
background: linear-gradient(90deg, #3B82F6, #8B5CF6);

/* Radial gradient */
background: radial-gradient(circle, #3B82F6, #1E40AF);

/* With color stops */
background: linear-gradient(45deg, 
  #3B82F6 0%, 
  #8B5CF6 50%, 
  #EC4899 100%);

💡 Pro Tips

Use CSS variables for easy theme switching
Combine gradients with blend modes for effects
Keep gradients subtle for professional designs
Test on different screens — colors vary by display

References & Standards

W3C CSS Images Module

The official specification defining CSS gradients (Linear, Radial, Conic).

W3C Specification

MDN Web Docs

Detailed documentation and examples for using CSS gradients in modern web development.

MDN: Gradients

Gradient Generator

How to Use

Related Tools

Color Picker

Box Shadow Generator