CSS Gradients: A Complete Guide to Linear, Radial, and Conic Gradients

CSS gradients are one of the most powerful visual tools available to frontend developers. They enable smooth transitions between colours without requiring a single image file, are infinitely customisable, scale perfectly at any resolution, and can be combined and layered in creative ways. This guide covers all four types of CSS gradients with practical examples and design guidance.

> Build gradients visually: Use our free [CSS Gradient Generator](/tools/css-gradient) to create and copy gradient CSS code without writing a single line manually.

What is a CSS Gradient?

A CSS gradient is a function that generates a smooth transition between two or more colours. Because gradients are CSS-generated rather than image-based, they are:

• Infinitely scalable (perfect for Retina displays)
• Load instantly (no HTTP request)
• Easily animated or changed dynamically with JavaScript

CSS supports four gradient types:

1. linear-gradient() — along a straight line

2. radial-gradient() — radiating from a point

3. conic-gradient() — rotating around a point

4. Repeating variants of each for tiled patterns

All gradients are used as values for the background or background-image CSS property.

Linear Gradients

The most common gradient type. A linear gradient transitions colours along a straight line.

/* Using direction keywords */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
background: linear-gradient(to bottom right, #10b981, #3b82f6);

/* Using angles (0deg = bottom to top, 90deg = left to right) */
background: linear-gradient(135deg, #f97316, #ec4899);

/* Multiple colour stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

/* Hard colour stop (no transition) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

Transparency in gradients: Avoid using the transparent keyword — it fades through black. Use rgba(r,g,b,0) instead:

/* Correct fade to transparent */
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));

For the right hex colour values to use in your gradients, see our [Hex to RGB guide](/blog/hex-color-guide) or use our [Hex to RGB Converter](/tools/hex-to-rgb).

Radial Gradients

Radial gradients radiate outward from a central point, creating circular or elliptical patterns. Ideal for spotlight effects, button highlights, and organic-looking colour transitions.

/* Basic circle */
background: radial-gradient(circle, #f97316, #8b5cf6);

/* Positioned centre */
background: radial-gradient(circle at top left, #3b82f6, #1e293b);
background: radial-gradient(circle at 30% 70%, #ec4899, #1e293b);

/* Fade to transparent */
background: radial-gradient(circle at center, #f97316 0%, transparent 70%);

Common use cases: spotlight overlays on hero images, soft background glows behind UI cards, vintage vignette effects, and radial menu highlight states.

Conic Gradients

Conic gradients rotate colours around a central point, like a colour wheel or pie chart.

/* Basic conic gradient (starts at top, goes clockwise) */
background: conic-gradient(red, yellow, green, blue, red);

/* Colour wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(90, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(270, 100%, 50%),
  hsl(360, 100%, 50%)
);

/* Pie chart effect with hard stops */
background: conic-gradient(#3b82f6 40%, #ec4899 40% 65%, #10b981 65%);

/* Custom starting angle */
background: conic-gradient(from 45deg, red, yellow, green);

Repeating Gradients

Repeating gradients tile their pattern across the element, creating geometric patterns and textures.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #1e293b 0px,
  #1e293b 10px,
  #334155 10px,
  #334155 20px
);

/* Concentric circles */
background: repeating-radial-gradient(
  circle,
  transparent 0,
  transparent 20px,
  rgba(59, 130, 246, 0.3) 20px,
  rgba(59, 130, 246, 0.3) 22px
);

Layering Multiple Gradients

CSS backgrounds can be layered — you can combine multiple gradients. Later layers appear below earlier layers.

/* Gradient overlay on a gradient background */
background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(135deg, #f97316, #8b5cf6);

/* Mesh gradient effect */
background:
  radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15) 0%, transparent 50%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.15) 0%, transparent 50%),
  #0f172a;

Practical Design Examples

Subtle background for cards:

.card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #d1fae5;
}

Gradient text (Webkit required):

.gradient-text {
  background: linear-gradient(135deg, #f97316, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Hero section background:

.hero {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    linear-gradient(225deg, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
    #ffffff;
}

Generate and customise these patterns visually with our [CSS Gradient Generator](/tools/css-gradient).

Animating Gradients

CSS gradients cannot be directly transitioned or animated because they are not a single value type. However, you can animate gradients indirectly using:

• CSS custom properties with @property (Chrome/Edge and now all modern browsers)
• background-position on large gradient backgrounds to create movement
• opacity transitions between layered gradient elements
• JavaScript to update gradient values via CSS custom properties

The @property approach enables smooth, performant gradient animations entirely in CSS.

Browser Support

All four gradient types have excellent modern browser support (98%+ globally). The conic-gradient() function is now fully supported in all major browsers. There is no need for vendor prefixes in new code targeting modern browsers.

Performance Tips

Gradients are generally very performant since they are rendered by the GPU. However, very complex gradients with many stops or layered gradients applied to many elements can impact rendering performance on lower-end devices. For animations, prefer animating via CSS custom properties rather than triggering layout recalculations.

Frequently Asked Questions

Q: How do I create a gradient that fades to transparent?

Use rgba(r, g, b, 0) instead of the transparent keyword. For example: linear-gradient(to bottom, #3b82f6, rgba(59, 130, 246, 0)). The transparent keyword is equivalent to rgba(0, 0, 0, 0) and causes an ugly dark fade when used with coloured gradients.

Q: Can I animate a CSS gradient?

Not directly — CSS cannot interpolate between gradient values. Workarounds include: using @property to define a custom animated property, animating background-position on a large gradient, or using JavaScript to update CSS custom properties.

Q: What is the difference between a radial and a conic gradient?

A radial gradient radiates outward from a point in concentric circles or ellipses. A conic gradient rotates around a point — think of the hands of a clock sweeping through colour. Radial gradients are great for glows and spotlights; conic gradients are perfect for pie charts and colour wheels.

Q: How do I find the right hex colour values for my gradient?

Use our [Hex to RGB Converter](/tools/hex-to-rgb) to work with colours across different formats, then plug the values into our [CSS Gradient Generator](/tools/css-gradient) to preview the result before writing any code.

Conclusion

CSS gradients are a design superpower available to every frontend developer. From subtle background washes to complex geometric patterns and UI highlights, gradients add depth, personality, and visual polish without performance cost. [Use ToolHub's CSS Gradient Generator](/tools/css-gradient) to visually create and export gradient code for any design requirement — no design experience needed.