Color Tools

CSS Gradient Generator

Generate linear or radial CSS gradients with up to 8 color stops. Adjust angle and stop positions with a live preview, then copy the gradient CSS.

Linear & Radial
Up to 8 Color Stops
Live Preview
Copy CSS
Browser-only

2 stops

Angle135°

Color stops

Stop 1

Position0%

Stop 2

Position100%

css

background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

Designing Modern CSS Gradients: Linear, Radial & Conic

CSS gradients enable smooth visual transitions between two or more designated colours. Because CSS gradients are computed mathematically by the browser rendering engine, they scale infinitely without resolution pixelation and eliminate the performance overhead of loading external raster background images.

The Three CSS Gradient Types

Gradient Type	Syntax Structure	Visual Appearance	Common Application
Linear	`linear-gradient(direction, color-stops)`	Straight line progression at specified angle	Hero banners, buttons, card borders
Radial	`radial-gradient(shape size at position, stops)`	Circular or elliptical radiating from a central focal point	Vignettes, spotlights, ambient lighting
Conic	`conic-gradient(from angle at position, stops)`	Rotates around a centre origin (like a radar sweep)	Color wheels, pie charts, loading spinners

Color Stops & Smooth Midpoints

Gradients transition smoothly between explicit color stops. By specifying percentages, you control where each transition begins and finishes:

/* Subtle 3-stop angled hero background */
.hero-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}

/* Hard color stop (sharp split-color background) */
.split-background {
  background: linear-gradient(90deg, #f8fafc 50%, #0f172a 50%);
}

Avoiding the "Gray Dead Zone" in CSS Gradients

When interpolating between two saturated colours using standard sRGB colour space (e.g., blue to yellow), the mathematical midpoint frequently dips through an unappealing desaturated grey zone. Modern CSS Color Module Level 4 supports perceptual colour spaces like in oklab or in oklch:

/* Vibrantly interpolated gradient using OKLCH */
.vibrant-gradient {
  background: linear-gradient(to right in oklch, #0070f3, #f5a623);
}

Designing Cross-Browser High-Performance Gradients

Color Stop Transitions: Spreading color stops evenly across percentage intervals creates smooth, predictable lighting transitions.
Hardware Acceleration: Browsers rasterise CSS gradients on the GPU. Keep gradients free from high-frequency animations to preserve battery life on mobile devices.
Fallback Colors: Always specify a solid background color immediately before the background-image: gradient declaration to ensure readable contrast on legacy browsers or high-contrast modes.

Frequently Asked Questions

How do linear, radial, and conic gradients differ in CSS?: A linear gradient transitions colors progressively along a straight line at a specified angle. A radial gradient radiates outwards from a central point in circular or elliptical patterns. A conic gradient rotates color transitions around a central anchor point like a clock hand or radar sweep.
How can I avoid the muddy grey middle zone in web gradients?: In standard sRGB space, transitioning between opposite hues often produces an unappealing desaturated grey midpoint. Using CSS Color Module Level 4 perceptual color spaces such as OKLCH or OKLab preserves vibrancy throughout the entire color interpolation.
Do CSS gradients impact browser rendering performance?: CSS gradients are computed natively by browser graphics hardware and generally perform faster than downloading external bitmap images. However, animating gradient angles or radial positions can trigger GPU repaints, so animating opacity on pseudo-elements is often preferred.
What types of gradients are supported?: This tool generates CSS linear-gradient (with configurable angle) and radial-gradient. You can add multiple color stops at custom positions.
How do I copy the CSS?: Click the 'Copy CSS' button to copy the full CSS property declaration including fallback background color for older browsers.
Can I generate gradients with more than 2 colors?: Yes — add up to 8 color stops. Each stop has an independent color and position percentage.
Where can I use the generated gradient?: The output is plain CSS: a gradient value that works with background and background-image, plus other properties that accept gradient functions. It is not a universal replacement for a standalone image URL, especially in legacy APIs.

Accuracy & Advisory Notice: CSS Gradient Generator

This website and utility are provided for general informational, calculation, and educational purposes only. Always verify critical computation outputs prior to professional deployment or financial use. See our Terms of Service and Privacy Policy for full governance details.

Loading tool...

Designing Modern CSS Gradients: Linear, Radial & Conic

The Three CSS Gradient Types

Gradient Type

Syntax Structure

Visual Appearance

Common Application

Linear

linear-gradient(direction, color-stops)

Straight line progression at specified angle

Hero banners, buttons, card borders

Radial

radial-gradient(shape size at position, stops)

Circular or elliptical radiating from a central focal point

Vignettes, spotlights, ambient lighting

Conic

conic-gradient(from angle at position, stops)

Rotates around a centre origin (like a radar sweep)

Color wheels, pie charts, loading spinners

Color Stops & Smooth Midpoints

Gradients transition smoothly between explicit color stops. By specifying percentages, you control where each transition begins and finishes:

/* Subtle 3-stop angled hero background */ .hero-gradient { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); } /* Hard color stop (sharp split-color background) */ .split-background { background: linear-gradient(90deg, #f8fafc 50%, #0f172a 50%); }

Avoiding the "Gray Dead Zone" in CSS Gradients

/* Vibrantly interpolated gradient using OKLCH */ .vibrant-gradient { background: linear-gradient(to right in oklch, #0070f3, #f5a623); }

Designing Cross-Browser High-Performance Gradients

Color Stop Transitions: Spreading color stops evenly across percentage intervals creates smooth, predictable lighting transitions.

Hardware Acceleration: Browsers rasterise CSS gradients on the GPU. Keep gradients free from high-frequency animations to preserve battery life on mobile devices.

Fallback Colors: Always specify a solid background color immediately before the background-image: gradient declaration to ensure readable contrast on legacy browsers or high-contrast modes.

Frequently Asked Questions

How do linear, radial, and conic gradients differ in CSS?

A linear gradient transitions colors progressively along a straight line at a specified angle. A radial gradient radiates outwards from a central point in circular or elliptical patterns. A conic gradient rotates color transitions around a central anchor point like a clock hand or radar sweep.

How can I avoid the muddy grey middle zone in web gradients?

In standard sRGB space, transitioning between opposite hues often produces an unappealing desaturated grey midpoint. Using CSS Color Module Level 4 perceptual color spaces such as OKLCH or OKLab preserves vibrancy throughout the entire color interpolation.

Do CSS gradients impact browser rendering performance?

CSS gradients are computed natively by browser graphics hardware and generally perform faster than downloading external bitmap images. However, animating gradient angles or radial positions can trigger GPU repaints, so animating opacity on pseudo-elements is often preferred.

What types of gradients are supported?

This tool generates CSS linear-gradient (with configurable angle) and radial-gradient. You can add multiple color stops at custom positions.

How do I copy the CSS?

Click the 'Copy CSS' button to copy the full CSS property declaration including fallback background color for older browsers.

Can I generate gradients with more than 2 colors?

Yes — add up to 8 color stops. Each stop has an independent color and position percentage.

Where can I use the generated gradient?

The output is plain CSS: a gradient value that works with background and background-image, plus other properties that accept gradient functions. It is not a universal replacement for a standalone image URL, especially in legacy APIs.