CSS Gradients: Complete Guide with Examples

Why Use CSS Gradients?

Before CSS gradients, creating smooth color transitions required image files — gradient PNGs or JPEGs used as backgrounds. This meant extra HTTP requests, larger page sizes, and fixed resolutions that did not scale well on Retina displays.

CSS gradients eliminate all of these problems. They are:

• Resolution-independent: Gradients look perfectly sharp on any display density, from 1x to 3x Retina.
• Zero file size: Gradients are generated by the browser from a few bytes of CSS — no image downloads needed.
• Infinitely scalable: They adapt to any container size without stretching, pixelation, or cropping.
• Animatable: CSS transitions and animations can smoothly animate gradient properties.
• Editable in code: Change colors, angles, and positions by modifying a single CSS line.

Linear Gradients

Linear gradients transition between colors along a straight line. They are the most commonly used gradient type.

Basic Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

The direction can be specified as:

• Keywords: to right, to bottom, to bottom right, to top left, etc.
• Angle: 0deg (bottom to top), 90deg (left to right), 180deg (top to bottom), 45deg (diagonal).

Examples

Simple two-color gradient:

background: linear-gradient(to right, #667eea, #764ba2);

This creates a horizontal gradient from blue-purple to deep purple.

Multi-color gradient:

background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

Diagonal gradient through three colors with explicit stop positions.

Hard color stops (no transition):

background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

When two color stops share the same position, there is no gradual transition — the colors change abruptly. This creates a split or striped effect.

Repeating Linear Gradients

background: repeating-linear-gradient(45deg, #3b82f6 0px, #3b82f6 10px, transparent 10px, transparent 20px);

Creates a repeating diagonal stripe pattern. Useful for progress bars, warning indicators, and decorative backgrounds.

Radial Gradients

Radial gradients radiate from a center point outward in a circular or elliptical shape.

Basic Syntax

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Examples

Simple circular gradient:

background: radial-gradient(circle, #667eea, #764ba2);

Elliptical gradient from corner:

background: radial-gradient(ellipse at top left, #667eea, #764ba2);

Sized radial gradient:

background: radial-gradient(circle 200px at center, #667eea, transparent);

Creates a glowing spot effect. Excellent for spotlight or hover effects.

Radial Gradient Use Cases

• Spotlight effects: A bright center fading to dark edges creates focus.
• Vignette overlays: radial-gradient(ellipse, transparent 50%, rgba(0,0,0,0.5)) creates a photographic vignette effect.
• Button highlights: A subtle radial gradient on buttons adds a 3D, glossy appearance.

Conic Gradients

Conic gradients rotate around a center point, like a color wheel. They were the last gradient type to gain broad browser support, reaching full support across all major browsers by 2022.

Basic Syntax

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

Examples

Color wheel:

background: conic-gradient(red, yellow, green, cyan, blue, magenta, red);

Creates a full color wheel. Starting and ending with the same color ensures a seamless loop.

Pie chart:

background: conic-gradient(#3b82f6 0% 40%, #ef4444 40% 70%, #22c55e 70% 100%);

Creates a simple pie chart with three segments. Conic gradients are actually used in many CSS-only chart implementations.

Advanced Gradient Techniques

Layered Gradients

You can stack multiple gradients using comma separation. This creates complex patterns and textures without any images:

background: linear-gradient(135deg, rgba(102,126,234,0.5), transparent 60%), linear-gradient(225deg, rgba(118,75,162,0.5), transparent 60%), linear-gradient(to bottom, #1a1a2e, #16213e);

This creates a rich, multi-dimensional background with overlapping color fields.

Gradient Text

Apply gradients to text for eye-catching headings:

background: linear-gradient(to right, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

This technique is widely used for hero headings and logos. Browser support is excellent in 2026.

Gradient Borders

CSS does not natively support gradient borders, but you can achieve the effect with background clipping:

border: 2px solid transparent;
background: linear-gradient(white, white) padding-box, linear-gradient(to right, #667eea, #764ba2) border-box;

Design Tips for Gradients

• Limit color stops: Two to three colors usually look best. More than four tends to look chaotic.
• Use analogous colors: Colors adjacent on the color wheel (blue-purple, green-teal) create harmonious, natural-looking gradients.
• Avoid complementary extremes: Red-to-green gradients pass through muddy brown in the middle. If you need contrasting colors, add a neutral mid-point.
• Consider accessibility: Ensure text over gradients has sufficient contrast at every point of the gradient. Use our Color Palette Extractor to identify dominant colors.
• Use subtle gradients for backgrounds: A 5-10% brightness variation is often more elegant than a dramatic color shift.
• Match your brand: Use gradient variations of your brand colors for consistency. Our CSS Gradient Generator helps you experiment visually.

Browser Support

As of 2026, CSS gradients have excellent support:

• Linear gradients: 99%+ global support. Fully supported in all browsers since ~2013.
• Radial gradients: 99%+ global support.
• Conic gradients: 97%+ global support. All major browsers since ~2022.
• Repeating gradients: Same support as their non-repeating counterparts.

No vendor prefixes are needed in 2026. The unprefixed syntax works everywhere.

Generate Gradients Visually

Writing gradient CSS by hand can be tedious, especially when experimenting with colors and angles. Our CSS Gradient Generator provides a visual editor where you can:

• Pick colors with a color picker
• Adjust gradient direction and angle
• Add and remove color stops
• Preview the result in real-time
• Copy the generated CSS code with one click

Try our free CSS Gradient Generator now and create beautiful gradients in seconds.