CSS Gradient Generator Guide: Linear, Radial & Conic Gradients Explained

CSS gradients let you create smooth color transitions entirely in code — no images, no external files, zero HTTP requests. They're resolution-independent (crisp at any screen density), animatable with CSS transitions, and far more flexible than static images. This guide covers all three gradient types, explains color stops in depth, and includes ready-to-use recipes for the most popular gradient patterns in modern web design.

The Three Types of CSS Gradients

Linear Gradients

A linear gradient transitions colors along a straight line. The basic syntax is:

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);

The direction can be specified using keywords or degree values. Keywords are the most readable for common directions:

background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to bottom right, #f093fb, #f5576c);
background: linear-gradient(to bottom, #4facfe, #00f2fe);

Degree values give precise control over the angle:

background: linear-gradient(45deg, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: linear-gradient(0deg, #4facfe, #00f2fe);  /* bottom to top */

Degrees follow a clockwise convention: 0deg points upward (same as to top), 90deg points right, 180deg points down, and 270deg points left.

Radial Gradients

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

background: radial-gradient(shape size at position, color-stop-1, color-stop-2);

Common examples:

/* Simple circle from center */
background: radial-gradient(circle, #f093fb, #f5576c);

/* Default ellipse */
background: radial-gradient(ellipse at center, #667eea, #764ba2);

/* Off-center spotlight effect */
background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.2), transparent 60%);

/* Size keywords */
background: radial-gradient(circle farthest-corner at 50% 50%, #4facfe, #00f2fe);

Conic Gradients

Conic gradients rotate colors around a central point — like looking down at a color wheel or slicing a pie chart. They have excellent browser support as of 2026:

/* Pie chart segments */
background: conic-gradient(red 0deg 120deg, green 120deg 240deg, blue 240deg 360deg);

/* Smooth color wheel */
background: conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red);

/* Off-center rotation */
background: conic-gradient(from 45deg at 30% 70%, #667eea, #764ba2, #667eea);

How Color Stops Work

Color stops define what color appears at what position along the gradient axis. Without explicit positions, colors are distributed evenly. With explicit positions, you have full control:

/* Evenly distributed */
background: linear-gradient(to right, red, yellow, green);

/* Explicit percentage positions */
background: linear-gradient(to right, red 0%, yellow 30%, green 100%);

/* Pixel positions (less flexible for responsive layouts) */
background: linear-gradient(to right, red 0px, yellow 100px, green 200px);

/* Hard stop: same position creates an instant color change */
background: linear-gradient(to right, red 50%, blue 50%);

You can add as many color stops as needed. Browsers interpolate smoothly between stops in the sRGB color space by default. CSS Color Level 4 allows specifying the interpolation color space (in oklch, in hsl, etc.) for perceptually smoother gradients, though this is a newer feature.

Creating Hard Transitions and Stripes

Setting two adjacent stops at the same position creates an instant color change with no gradual blending. This technique produces stripe patterns entirely in CSS:

background: linear-gradient(
  to right,
  #667eea 0%, #667eea 33.33%,
  #764ba2 33.33%, #764ba2 66.66%,
  #f093fb 66.66%, #f093fb 100%
);

Direction Syntax for Linear Gradients

Use Cases in Web Design

Hero Section Backgrounds

Full-screen gradient backgrounds are a staple of modern landing pages. They add depth and visual interest without the loading cost of a large photo. Diagonal gradients (45deg or 135deg) tend to feel more dynamic than purely horizontal or vertical ones.

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Button Hover States

Subtle gradient shifts on hover create a sense of depth without JavaScript. Use CSS transitions to animate between gradient states:

.btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transition: filter 0.2s ease;
}
.btn:hover {
  filter: brightness(0.9);
}

Card Image Overlays

A transparent-to-dark gradient over a card image ensures text stays readable while the photo shows through:

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
}

Text Gradients

Gradient text is a popular design treatment for headings. It requires three CSS properties working together:

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

Popular Gradient Recipes

Accessibility: Sufficient Contrast Over Gradients

Gradients introduce a unique accessibility challenge: contrast varies across the gradient. If you're placing text over a gradient background, the text must meet WCAG contrast requirements at every point it overlaps — not just at the average. The safest approaches are:

• Position text only over the darkest or lightest portion of the gradient where contrast is highest.
• Add a semi-transparent dark overlay behind text (rgba(0,0,0,0.5)) to guarantee contrast regardless of the underlying gradient.
• Choose gradients that stay within a narrow lightness range, avoiding transitions from very light to very dark behind body text.
• Test contrast at both the lightest and darkest points using a WCAG 2.1 contrast checker tool.

Browser Support

All three gradient types — linear-gradient, radial-gradient, and conic-gradient — are supported in all modern browsers without vendor prefixes as of 2026. You do not need -webkit- or -moz- prefixes for any currently supported browser version.

For situations where you need a solid color fallback (very old browsers or environments where CSS gradients fail), declare the fallback before the gradient:

background: #667eea;  /* solid fallback */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

How to Use the CSS Gradient Generator

1. Open the CSS Gradient Generator.
2. Choose the gradient type: linear, radial, or conic.
3. Pick your colors using the color pickers or enter HEX/RGB values directly.
4. Adjust the direction or angle using the visual controls.
5. Add or remove color stops for multi-color gradients.
6. Preview the result on the live canvas in real time.
7. Copy the generated CSS declaration and paste it into your stylesheet.