Complete CSS Gradient Guide: linear-gradient, radial-gradient, conic-gradient — Differences and Practical Examples

Introduction to CSS Gradients

CSS gradients enable smooth color transitions without requiring image files, creating rich visuals that scale perfectly at any resolution. There are three main types:

1. linear-gradient — directional color transition
2. radial-gradient — radiating from a center point
3. conic-gradient — rotating around a center point

1. linear-gradient

The most common gradient type — colors transition along a straight line.

Syntax

background: linear-gradient(direction, color1, color2, ...);

Direction Examples

/* top to bottom (default) */background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);/* left to right */background: linear-gradient(to right, #667eea, #764ba2);/* angle-based */background: linear-gradient(45deg, #f093fb, #f5576c);/* diagonal */background: linear-gradient(to bottom right, #4facfe, #00f2fe);

Color Stops

/* sharp transition at 50% */background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);/* three-color gradient with positions */background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

Practical Designs

/* sunset */.sunset {  background: linear-gradient(to bottom, #fc4a1a, #f7b733);}/* dark blue */.ocean {  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);}/* soft pastel */.pastel {  background: linear-gradient(to right, #ffecd2, #fcb69f);}

CSS Gradient GeneratorVisually generate beautiful CSS linear and radial gradients.

2. radial-gradient

Colors radiate outward from a central point.

Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

Shape and Position

/* perfect circle */background: radial-gradient(circle, #ff6b6b, #4ecdc4);/* ellipse (default) */background: radial-gradient(ellipse, #667eea, #764ba2);/* positioned radial */background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c);

Practical Designs

/* spotlight effect */.spotlight {  background: radial-gradient(circle at center,     rgba(255, 255, 255, 0.3) 0%,     transparent 70%  ), #1a1a2e;}/* glow effect */.glow {  background: radial-gradient(circle at 50% 50%,     #ff6b6b 0%, #ff6b6b 20%, transparent 60%  );}

3. conic-gradient

Colors rotate around a center point — excellent for pie charts and color wheels.

Syntax

background: conic-gradient(from angle at position, color1, color2, ...);

Practical Designs

/* pie chart */.pie-chart {  width: 200px;  height: 200px;  border-radius: 50%;  background: conic-gradient(    #ff6b6b 0% 30%,    #4ecdc4 30% 60%,    #667eea 60% 100%  );}/* color wheel */.color-wheel {  border-radius: 50%;  background: conic-gradient(    red, yellow, lime, aqua, blue, magenta, red  );}

Layering Multiple Gradients

/* overlay gradient on gradient */.layered {  background:     linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)),    linear-gradient(to right, #ff6b6b, #4ecdc4);}

Accessibility: Color Contrast Requirements

When placing text over gradients, WCAG 2.1 contrast ratios must be verified at every point where text overlaps the gradient.

WCAG 2.1 requirements:

• AA: Normal text 4.5:1 minimum / Large text (18pt+ or bold 14pt+) 3:1 minimum
• AAA: Normal text 7:1 minimum / Large text 4.5:1 minimum

Always check the lowest contrast point where your text appears — not the average across the gradient.

Color Code ConverterConvert between HEX, RGB, HSL, and CMYK color codes instantly.

Design Best Practices

1. Choose analogous colors

Gradients between adjacent hues on the color wheel (red → orange → yellow) look natural. Complementary color gradients (red ↔ green) often produce muddy transitions.

2. Maintain brand consistency

Limit gradient colors to variations of your brand palette.

3. Prioritize text legibility

Verify contrast ratios before publishing any gradient with text overlay.

4. Animated gradients

@keyframes gradientFlow {  0% { background-position: 0% 50%; }  50% { background-position: 100% 50%; }  100% { background-position: 0% 50%; }}.animated-gradient {  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);  background-size: 400% 400%;  animation: gradientFlow 15s ease infinite;}

Summary

Gradient Type	Motion	Primary Use
linear-gradient	Directional line	Backgrounds, buttons, headers
radial-gradient	Center outward	Spotlights, hover effects
conic-gradient	Rotational arc	Pie charts, color wheels

CSS Gradient GeneratorVisually generate beautiful CSS linear and radial gradients.