CSS Gradient Generator — The Complete Developer Guide

CSS gradients are one of the most powerful tools in a developer's design toolkit. They replace background images with zero HTTP requests, deliver perfect resolution on retina and 4K displays, and take a single line of CSS. The CSS Gradient Generator on ToolForge lets you create any gradient visually — drag color stops, switch gradient types, choose from 24 presets, and copy the result as standard CSS or Tailwind classes in one click.

This guide covers everything: the syntax for all three gradient types (linear, radial, conic), color stop positioning, Tailwind CSS gradient utilities, animation techniques, gradient overlays on images, and 15 ready-to-use patterns. Bookmark it as your gradient reference.

What Are CSS Gradients?

The CSS <gradient> data type is technically a subtype of <image> — not a color. This distinction matters: you can use gradients anywhere an image is accepted (background-image, border-image, mask-image), but not in properties that require a color value like color or border-color.

Gradients replaced background images because they offer four decisive advantages: resolution independence (infinitely scalable, no pixelation), zero HTTP requests (drawn by the browser's rendering engine), GPU acceleration (rendered in compositing, not the paint layer), and instant editability (change a hex code in one file vs. re-exporting an asset from Photoshop).

Browser support is universal. Linear and radial gradients work in every browser since 2012. Conic gradients, the newest addition, are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+ — over 96% of global usage as of 2026. No vendor prefixes needed.

CSS Linear Gradients — Syntax, Direction & Examples

Basic Syntax

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

The direction can be a keyword (to right, to bottom left) or a degree value. If omitted, the default is to bottom (180deg, top to bottom).

Direction Keywords and Degree Values

Degree wheel note: 0° points up (to top), 90° points right (to right), 180° points down (to bottom), 270° points left (to left). Degrees increase clockwise.

Color Stops and Positioning

Color stops define where each color starts and ends. Without explicit positions, stops are evenly distributed. With positions (in %, px, or other length units), you control exactly where each transition happens.

background: linear-gradient(to right, red, blue);

background: linear-gradient(to right, red, yellow, blue);

background: linear-gradient(to right, red 0%, yellow 20%, green 100%);

background: linear-gradient(to right, red 50%, blue 50%);

6 Linear Gradient Examples

background: linear-gradient(to right, #2193b0, #6dd5ed);

background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);

background: linear-gradient(90deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);

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

background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));

border: 3px solid;
border-image: linear-gradient(to right, #667eea, #764ba2) 1;

CSS Radial Gradients — Shape, Size & Position

Basic Syntax

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

Shape: circle gives equal radius in all directions. ellipse (default) stretches to fill the element dimensions.

Size keywords: farthest-corner (default) extends to the furthest corner. closest-side ends at the nearest edge. farthest-side ends at the farthest edge.

Position: at center (default), at top left, or precise percentages like at 30% 70%.

3 Radial Gradient Examples

background: radial-gradient(circle at center, #ffffff, #1a1a2e);

background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);

background: radial-gradient(circle at center, #667eea 0%, #764ba2 50%, #0f0c29 100%);

CSS Conic Gradients — Angles & Pie Charts

Basic Syntax

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

Conic gradients rotate colors around a center point — think of a color wheel or the sweep of a clock hand. Unlike linear and radial gradients where stops use distance, conic stops use angle positions (in degrees or percentages).

Use cases: Pie charts (hard color stops), color wheels (smooth transitions), circular progress indicators, decorative angular patterns.

Browser support: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Covers over 95% of global usage as of 2026. Always provide a fallback background color for unsupported browsers.

background: conic-gradient(red, yellow, green, blue, red);

background: conic-gradient(#4f46e5 0% 35%, #10b981 35% 65%, #f59e0b 65% 100%);
border-radius: 50%;

background: conic-gradient(from 45deg, #667eea, #764ba2, #667eea);

Repeating Gradients

CSS provides repeating variants of all three gradient types: repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). The pattern defined between the first and last stop is tiled infinitely. This makes stripes, patterns, and decorative backgrounds easy to create without JavaScript or image assets.

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

/* Repeating radial rings */
background: repeating-radial-gradient(
  circle at center,
  #667eea 0px,
  #667eea 5px,
  transparent 5px,
  transparent 20px
);

Key rule: the last color stop position defines the pattern tile size. In the diagonal stripe example, the pattern repeats every 20px.

Tailwind CSS Gradient Classes — Complete Reference

Built-in Gradient Utilities

Tailwind includes a set of gradient direction utilities combined with color stop utilities. You can combine any direction with any color stop from the Tailwind palette.

<!-- Directions -->
bg-gradient-to-t    (to top)
bg-gradient-to-tr   (to top right)
bg-gradient-to-r    (to right)
bg-gradient-to-br   (to bottom right)
bg-gradient-to-b    (to bottom)
bg-gradient-to-bl   (to bottom left)
bg-gradient-to-l    (to left)
bg-gradient-to-tl   (to top left)

<!-- 2-stop gradient -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">

<!-- 3-stop gradient with via -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">

<!-- Tailwind palette colors -->
from-{color}-{shade}  via-{color}-{shade}  to-{color}-{shade}

Arbitrary Value Gradients

For gradients with custom angles, more than 3 stops, or specific hex colors not in the Tailwind palette, use arbitrary values. Spaces become underscores, commas remain as-is:

<!-- Custom angle with hex colors -->
<div class="bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]">

<!-- Radial gradient -->
<div class="bg-[radial-gradient(circle_at_center,#667eea,#0f0c29)]">

<!-- Conic gradient -->
<div class="bg-[conic-gradient(from_0deg,red,blue,red)]">

Gradient Text in Tailwind

<span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
  Gradient Text
</span>

Generate any gradient and copy the Tailwind class from our CSS Gradient Generator. It automatically outputs the correct Tailwind arbitrary value syntax for any combination of stops and angles.

How to Add a Gradient Overlay on Images

A gradient overlay on an image creates visual depth and ensures text legibility on photo backgrounds. The technique uses the background-image shorthand to layer a gradient on top of an image URL. The gradient must be listed first to render on top.

/* Standard CSS — gradient layer over image */
background-image:
  linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)),
  url('/hero-image.jpg');
background-size: cover;
background-position: center;

/* Tailwind approach — use a positioned overlay div */
<div class="relative">
  <img src="/hero-image.jpg" class="w-full h-64 object-cover" alt="">
  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80"></div>
  <h1 class="absolute bottom-4 left-4 text-white font-bold">Title</h1>
</div>

Verify text contrast against your gradient using our Color Contrast Checker to meet WCAG accessibility standards.

How to Animate CSS Gradients

CSS cannot directly animate between two gradient values — gradients are treated as images, not interpolatable properties. The two standard workarounds are background-position animation on an oversized gradient, and opacity animation on stacked pseudo-elements.

Method 1: Scrolling Gradient (background-position)

.animated-gradient {
  background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Method 2: Cross-fade via Pseudo-elements

.element { position: relative; }
.element::before, .element::after {
  content: '';
  position: absolute; inset: 0;
  transition: opacity 2s ease;
}
.element::before { background: linear-gradient(135deg, #667eea, #764ba2); }
.element::after  { background: linear-gradient(135deg, #f12711, #f5af19); opacity: 0; }
.element:hover::before { opacity: 0; }
.element:hover::after  { opacity: 1; }

Performance note: Animating background-position triggers paint repaint on each frame. For critical UI, use the pseudo-element approach with opacity — which is GPU-composited and paint-free. Avoid animated gradients near scrolling content or for elements that update at 60fps.

15 Ready-to-Use Gradient Patterns

All 24 presets are available in our CSS Gradient Generator — click any to load and customize. Here are 15 to copy directly:

Performance and Accessibility Tips

• •

  CSS gradients are GPU-accelerated and render in the compositing layer — they are faster than equivalent background images on every modern browser.

• •

  Gradients are invisible to screen readers — they are background images, not content. Never use gradient text as the only way to convey information.

• •

  For text on gradient backgrounds, verify contrast using the Color Contrast Checker tool. Both the lightest and darkest parts of the gradient must meet WCAG 2.1 AA (4.5:1 for normal text).

• •

  Avoid rapidly flashing animated gradients (>3 flashes per second) — this can trigger photosensitive seizures (WCAG 2.3.1 Three Flashes).

• •

  CSS gradients are print-friendly — they render in print stylesheets. Background images with background: url() are hidden by default in print. Use @media print and background-color: as a fallback if the gradient conveys meaning.

• •

  In high-contrast mode (Windows forced colors), gradients are replaced with solid colors. Do not rely on gradients for UI affordances like buttons — use borders and text too.

Frequently Asked Questions