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

CSS gradients are one of the most underused tools in a frontend developer's arsenal. They eliminate the need for gradient images, reduce HTTP requests, scale perfectly at any resolution, and are rendered by the GPU. Yet most developers stick to flat background colours because gradient syntax feels unintuitive. This guide covers everything from basic two-colour transitions to animated gradient effects and practical design patterns.

Linear Gradients

Linear gradients create a smooth transition between colours along a straight line. The simplest form needs just two colours — the browser calculates the transition automatically.

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

You control direction with angles or keywords. Angles are measured clockwise from the top, so 0deg points straight up, 90deg points right, and 180deg points down (the default).

Colour Stops

Colour stops let you control exactly where each colour begins and ends. Without explicit stops, colours are distributed evenly. With stops, you can create sharp transitions, weighted blends, and complex multi-colour patterns.

/* Even distribution (default) */
background: linear-gradient(135deg, #f093fb, #f5576c, #4facfe);

/* Explicit stops — purple dominates */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 70%, #4facfe 100%);

/* Sharp colour change — no transition */
background: linear-gradient(to right, #667eea 50%, #764ba2 50%);

The sharp transition trick — setting two adjacent stops at the same percentage — is incredibly useful for creating stripes, flags, progress bars and split-colour backgrounds without any images.

Repeating Linear Gradients

The repeating-linear-gradient() function tiles the gradient pattern. This is how you create stripes and diagonal patterns purely in CSS.

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

Radial Gradients

Radial gradients radiate outward from a centre point. They are perfect for spotlight effects, glowing buttons, vignettes and decorative backgrounds.

background: radial-gradient(circle, #ff9a9e, #fad0c4);

You can control the shape (circle or ellipse), size and position:

/* Ellipse positioned at top-left */
background: radial-gradient(ellipse at top left, #a18cd1, #fbc2eb);

/* Specific size */
background: radial-gradient(circle 200px at center, #ff6b6b, transparent);

/* Size keywords */
background: radial-gradient(closest-side at 30% 70%, #48dbfb, #fad0c4);

The size keywords — closest-side, farthest-side, closest-corner, farthest-corner — determine how the gradient scales relative to the element and the centre position. farthest-corner is the default and usually what you want.

Conic Gradients

Conic gradients rotate colour transitions around a centre point, like the sweep of a clock hand. They are the newest of the three types and perfect for pie charts, colour wheels and decorative effects.

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(#ff6b6b 0% 35%, #feca57 35% 65%, #48dbfb 65% 100%);

/* From a specific angle */
background: conic-gradient(from 90deg, #667eea, #764ba2);

Conic gradients with hard stops create pie chart segments without any JavaScript. Combined with border-radius: 50%, you get a perfect circular chart in pure CSS.

Transparency and Layering

Gradients support transparency through rgba(), hsla() or the transparent keyword. This opens up layering possibilities that are impossible with flat colours.

/* Fade to transparent */
background: linear-gradient(to bottom, #667eea, transparent);

/* Overlay on image */
background:
  linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.3)),
  url('hero.jpg') center/cover;

Layering a semi-transparent gradient over a background image is one of the most common patterns in modern web design. It ensures text remains readable regardless of the image content. The gradient goes first in the background shorthand because CSS paints layers from top to bottom.

You can also layer multiple gradients to create complex patterns. Each gradient layer is separated by a comma:

/* Cross-hatch pattern */
background:
  repeating-linear-gradient(0deg, transparent, transparent 49px, #ccc 49px, #ccc 50px),
  repeating-linear-gradient(90deg, transparent, transparent 49px, #ccc 49px, #ccc 50px);

10 Copy-Paste Gradient Presets

1. Ocean Blue

background: linear-gradient(135deg, #667eea, #764ba2);

2. Sunset

background: linear-gradient(135deg, #f093fb, #f5576c);

3. Fresh Mint

background: linear-gradient(135deg, #11998e, #38ef7d);

4. Warm Flame

background: linear-gradient(45deg, #ff9a9e, #fad0c4);

5. Night Fade

background: linear-gradient(to top, #a18cd1, #fbc2eb);

6. Deep Space

background: linear-gradient(to right, #000428, #004e92);

7. Peach

background: linear-gradient(to right, #ed6ea0, #ec8c69);

8. Arctic

background: linear-gradient(135deg, #74ebd5, #ACB6E5);

9. Mojito

background: linear-gradient(to top, #93F9B9, #1D976C);

10. Royal

background: linear-gradient(to right, #141E30, #243B55);

Animated Gradients

CSS cannot animate gradient colour values directly, but you can achieve smooth gradient animations using background-size and background-position:

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

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

This technique creates a flowing, organic feel and is widely used for hero sections, loading states and decorative backgrounds. The oversized background-size creates more gradient than the element needs, and the animation pans across it.

For more performant gradient animations, you can also use the @property rule to register custom properties that CSS can interpolate:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: conic-gradient(from var(--gradient-angle), #667eea, #764ba2, #667eea);
  animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Gradient Performance

CSS gradients are rendered by the GPU and generally perform well. However, there are situations where performance matters:

Gradients vs images: A CSS gradient is always smaller than a gradient image file, loads instantly without an HTTP request, and scales perfectly on retina displays. Prefer gradients whenever the visual effect can be achieved with CSS.

Complex gradients on scroll: Animating gradients during scroll events can cause jank. If you need gradient changes on scroll, use will-change: background to hint to the browser, or pre-render the gradient and animate opacity instead.

Large elements: On very large elements (full-viewport backgrounds), complex gradients with many colour stops render without issues on modern hardware. But on older mobile devices, more than 8-10 colour stops can cause visible rendering delays.

Border gradients: CSS border-image with gradients has inconsistent rendering across browsers. A more reliable approach is using a pseudo-element with the gradient as a background and the main element on top with a solid background, creating a "border" effect through padding or sizing.

Gradient Text

Applying gradients to text requires a combination of properties:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

This technique clips the gradient background to the text shape, creating the appearance of gradient-coloured text. The color: transparent fallback ensures the text is not double-rendered in browsers that do not support -webkit-text-fill-color.

Browser Support and Fallbacks

Linear and radial gradients have excellent browser support — effectively 100% of modern browsers. Conic gradients are supported in all evergreen browsers but may need a fallback for older versions. The @property rule for gradient animation is newer and requires Chrome 85+, Edge 85+, Safari 15.4+ or Firefox 128+.

Always provide a solid colour fallback before any gradient declaration:

.hero {
  background: #667eea; /* Fallback */
  background: linear-gradient(135deg, #667eea, #764ba2);
}

Practical Design Patterns

Beyond decorative backgrounds, gradients solve real design problems. Here are patterns you will use in production.

Scroll fade: A gradient overlay at the bottom of a scrollable container hints that more content exists below. Apply a transparent-to-background gradient on a pseudo-element positioned at the bottom of the container.

.scroll-container::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 40px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

Card hover effect: A gradient border that appears on hover creates an elegant interactive state without changing layout. Use a background gradient on the card with padding, and a solid inner background to reveal the gradient edges.

Section dividers: Instead of flat horizontal rules, a gradient that fades from transparent to a colour and back creates a softer visual break between page sections. This looks more polished than a solid border-bottom and takes one line of CSS.

Loading skeleton: Animated gradients make excellent skeleton loading states. A shimmer effect using background-size: 200% with a linear gradient animation gives users a visual cue that content is loading, performing better than spinner animations for content-heavy layouts.

Accessibility Considerations

Gradients can create accessibility problems if text sits on top of them. A gradient that transitions from dark to light may have excellent contrast at one end and failing contrast at the other. Always check contrast ratios at the weakest point of the gradient — the lightest colour behind the darkest text, or vice versa.

For text on gradient backgrounds, a semi-transparent overlay between the gradient and text ensures consistent readability. Alternatively, use a text shadow or a solid background behind the text element itself rather than relying on the gradient alone for contrast.

Animated gradients should respect the prefers-reduced-motion media query. Some users find continuous motion distracting or nauseating. Wrap gradient animations in a motion preference check:

@media (prefers-reduced-motion: no-preference) {
  .animated-gradient {
    animation: gradient-shift 15s ease infinite;
  }
}