CSS Gradients — A Complete Guide to Linear, Radial & Conic Gradients

What Are CSS Gradients?

CSS gradients allow you to display smooth transitions between two or more specified colors. They're a type of CSS image (not a color), so they can be used anywhere you'd use an image: backgrounds, borders, masks, and more.

Gradients are resolution-independent, meaning they look crisp at any scale — perfect for responsive design and high-DPI screens.

Types of CSS Gradients

CSS supports three types of gradients:

1. Linear gradients: Transition along a straight line
2. Radial gradients: Transition outward from a center point
3. Conic gradients: Transition around a center point (like a pie chart)

1. Linear Gradients

Linear gradients transition colors along a straight line.

Basic Syntax

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

Examples

/* Top to bottom (default) */

/* Left to right */ background: linear-gradient(to right, white, black);

/* Diagonal */ background: linear-gradient(to bottom right, white, black);

/* Angle (in degrees) */ background: linear-gradient(45deg, white, black);

/* Multiple color stops */ background: linear-gradient(red, yellow, green);

/* Color stops with positions */ background: linear-gradient(red 0%, yellow 50%, green 100%);

/* Hard stops (no smoothing) */ background: linear-gradient(red 0%, red 50%, blue 50%, blue 100%); `

Direction Values

Repeating Linear Gradients

background: repeating-linear-gradient(
  45deg,
  red 0px,
  red 20px,
  blue 20px,
  blue 40px
);

2. Radial Gradients

Radial gradients transition colors outward from a center point.

Basic Syntax

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

Examples

/* Centered, default (ellipse) */

/* Circle */ background: radial-gradient(circle, white, black);

/* Positioned at top-left */ background: radial-gradient(circle at top left, white, black);

/* Size: closest-side, farthest-corner, etc. */ background: radial-gradient(circle closest-side at 50% 50%, white, black);

/* Multiple color stops */ background: radial-gradient(circle, red, yellow, green);

/* Color stops with positions */ background: radial-gradient(red 0%, yellow 50%, green 100%); `

Shape and Size Keywords

Repeating Radial Gradients

background: repeating-radial-gradient(
  circle,
  red 0px,
  red 20px,
  blue 20px,
  blue 40px
);

3. Conic Gradients

Conic gradients transition colors around a center point, like a pie chart or color wheel.

Basic Syntax

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

Examples

/* Basic conic gradient */

/* Starting from 45 degrees */ background: conic-gradient(from 45deg, red, blue);

/* Positioned at 30% 40% */ background: conic-gradient(at 30% 40%, red, blue);

/* Color stops with positions (in degrees) */ background: conic-gradient(red 0deg, yellow 90deg, green 180deg, blue 270deg, red 360deg);

/* Pie chart effect */ background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg); `

Creating a Color Wheel

background: conic-gradient(
  from 0deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Creating a Pie Chart

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red 0% 25%,
    blue 25% 50%,
    green 50% 75%,
    yellow 75% 100%
  );
}

Using FreeToolJet's CSS Gradient Generator

Our CSS Gradient Generator tool makes creating gradients visual and easy:

Step-by-Step Guide

1. Open the CSS Gradient Generator tool
2. Choose gradient type: Linear, Radial, or Conic
3. For linear gradients:
4. For radial gradients:
5. For conic gradients:
6. Copy the generated CSS code

Features

• Live preview: See changes in real-time
• Multiple color stops: Add as many as you need
• Color picker: Visually choose colors
• CSS output: Copy ready-to-use CSS code
• Cross-browser prefixes: Includes -webkit- and -moz- prefixes if needed

Advanced Gradient Techniques

1. Gradient Overlays

Layer gradients with transparency for rich effects:

background: 
  linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
  url('background.jpg');

2. Multiple Gradients

Combine multiple gradients:

background: 
  linear-gradient(45deg, red 25%, transparent 25%),
  linear-gradient(-45deg, red 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, red 75%),
  linear-gradient(-45deg, transparent 75%, red 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

3. Gradient Borders

.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, red, blue) 1;

/* Alternative using background-clip */ .gradient-border { background: linear-gradient(white, white) padding-box, linear-gradient(to right, red, blue) border-box; border: 4px solid transparent; } `

4. Text with Gradient

.gradient-text {
  background: linear-gradient(45deg, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Fallback */
}

⚠️ background-clip: text is not yet supported in all browsers. Use with caution and provide fallbacks.

5. Animated Gradients

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }

.animated-gradient { background: linear-gradient(270deg, red, yellow, green, blue); background-size: 400% 400%; animation: gradient-shift 5s ease infinite; } `

Color Interpolation Methods

By default, CSS gradients interpolate colors in the sRGB color space. You can change this with the in keyword (modern browsers):

/* Default (sRGB) */

/* Using OKLCH (perceptually uniform) */ background: linear-gradient(in oklch, red, blue);

/* Using HSL */ background: linear-gradient(in hsl, red, blue);

/* Using LAB */ background: linear-gradient(in lab, red, blue); `

Why it matters: sRGB interpolation can produce muddy middle colors. OKLCH/LAB produce more vibrant, perceptually uniform gradients.

Browser Support

For older browsers, use fallbacks:

.background {
  background: rgb(255, 0, 0); /* Fallback solid color */
  background: linear-gradient(red, blue);
}

Common Gradient Patterns

1. Stripes

.stripes {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    white 10px,
    white 20px
  );
}

2. Checkerboard

.checkerboard {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

3. Mesh Gradient

.mesh {
  background:
    radial-gradient(at 40% 20%, rgba(255, 0, 0, 0.5) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(255, 255, 0, 0.5) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(0, 255, 255, 0.5) 0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(0, 255, 0, 0.5) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(0, 0, 255, 0.5) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(255, 0, 255, 0.5) 0px, transparent 50%),
    radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.5) 0px, transparent 50%);
}

Performance Considerations

1. Complex gradients are expensive: Each gradient is a rendered image. Too many complex gradients can impact performance.
2. Use will-change: transform: For animated gradients, promote to a new layer.
3. Avoid gradient on large areas: Consider using a small gradient tile with background-repeat.
4. Test on mobile: Gradients can be particularly expensive on mobile GPUs.

Accessibility Considerations

1. Contrast ratio: Ensure text has sufficient contrast against gradient backgrounds.
2. Prefers-reduced-motion: Disable animated gradients if user prefers reduced motion:

@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
  }
}

1. Color blindness: Test gradients with color blindness simulators.

Tips for Great Gradients

1. Use analogous colors: Colors next to each other on the color wheel create harmonious gradients
2. Limit color stops: 2-4 color stops usually suffice; more can look messy
3. Use transparency: Semi-transparent color stops create depth
4. Match your brand: Use your brand colors for consistency
5. Test on different screens: Gradients can look different on different displays

Related Tools

• CSS Gradient Generator — Create custom CSS gradients
• Color Converter — Convert between color formats
• BW Image Converter — Convert images to black and white