CSS Gradient Generator

CSSTools.io

Your Gradient

Adjust the controls to create your perfect gradient.

Live Preview

CSS Gradients: Complete Guide

A CSS gradient is a smooth transition between two or more colors rendered entirely by the browser — no image files needed. Gradients scale perfectly at any resolution, load instantly, and can be animated. They are used for page backgrounds, button fills, card headers, text effects, progress bars and decorative dividers.

Use the generator above to create linear, radial or conic gradients visually, add as many color stops as you need, and copy the CSS or Tailwind output instantly.

How to Use This Gradient Generator

Pick gradient type — Linear, Radial or Conic. Linear flows in one direction; radial radiates from a point; conic sweeps around.
Add color stops — Click "+ Add Color Stop" to layer colors. Drag the slider to position each stop along the gradient.
Adjust direction or angle — Set degrees for linear and conic, or position for radial. Click any preset to load a ready-made gradient.
Copy the code — Switch between CSS, Tailwind and SCSS tabs and paste into your project.

Linear Gradients

Linear gradients transition colors along a straight line at a specified angle. 0deg goes bottom to top, 90deg goes left to right, 135deg goes diagonally.

/* Two colors */
background: linear-gradient(135deg, #7c6fff, #ff6fb0);

/* Three color stops */
background: linear-gradient(135deg, #7c6fff 0%, #ff6fb0 50%, #f7c948 100%);

/* With custom stop positions */
background: linear-gradient(to right, #0f0c29, #302b63 40%, #24243e);

/* Repeating stripe pattern */
background: repeating-linear-gradient(
  45deg, #7c6fff 0px, #7c6fff 10px, transparent 10px, transparent 20px
);

Radial Gradients

Radial gradients radiate outward from a center point in a circle or ellipse. Great for spotlight effects, glowing buttons and vignette overlays.

/* Basic radial */
background: radial-gradient(circle, #7c6fff, #0a0a0f);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #ff6fb0, transparent 60%);

/* Elliptical gradient */
background: radial-gradient(ellipse at center, #7c6fff 0%, #0a0a0f 70%);

Conic Gradients

Conic gradients rotate colors around a center point like a color wheel or pie chart. Supported in all modern browsers.

/* Color wheel */
background: conic-gradient(red, yellow, green, blue, red);

/* Pie chart segments */
background: conic-gradient(#7c6fff 0% 40%, #ff6fb0 40% 70%, #f7c948 70% 100%);

/* Starting from a different angle */
background: conic-gradient(from 45deg, #7c6fff, #ff6fb0, #7c6fff);

Gradient Text

Apply a gradient to text using background-clip: text with a transparent text color. Works in all modern browsers.

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

Gradient Borders

CSS doesn't have a native gradient-border property, but you can achieve it with background-clip:

.gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #7c6fff, #ff6fb0) border-box;
}

Want to build gradient borders visually with rounded corners, multi-stop colors and copy-paste output? Use our CSS Gradient Border Generator →

Animating Gradients

CSS gradients cannot be directly transitioned, but you can fake animation using background-position on an oversized gradient, or the @property API to animate color stops in modern browsers.

/* Animated gradient via background-position */
.animated-gradient {
  background: linear-gradient(135deg, #7c6fff, #ff6fb0, #f7c948, #7c6fff);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Mesh Gradients in CSS

Mesh gradients create rich, multi-point color blends that mimic the mesh gradient tools in Figma and Illustrator. CSS doesn't have a native mesh-gradient property yet, but you can fake them by layering multiple radial-gradient backgrounds with different positions and blend modes.

.mesh-gradient {
  background:
    radial-gradient(at 20% 30%, #7c6fff 0%, transparent 50%),
    radial-gradient(at 80% 20%, #ff6fb0 0%, transparent 50%),
    radial-gradient(at 50% 80%, #06b6d4 0%, transparent 50%),
    radial-gradient(at 30% 70%, #22c55e 0%, transparent 50%);
  background-color: #0a0a0f;
}

For animated mesh gradients, the CSS @property API lets you register custom properties that can be animated. This technique enables smooth color transitions that CSS transitions can't normally handle:

@property --color-a {
  syntax: '<color>';
  initial-value: #7c6fff;
  inherits: false;
}
@property --color-b {
  syntax: '<color>';
  initial-value: #ff6fb0;
  inherits: false;
}

.animated-mesh {
  background:
    radial-gradient(at 20% 30%, var(--color-a) 0%, transparent 50%),
    radial-gradient(at 80% 70%, var(--color-b) 0%, transparent 50%);
  animation: mesh-shift 6s ease-in-out infinite alternate;
}
@keyframes mesh-shift {
  to {
    --color-a: #06b6d4;
    --color-b: #22c55e;
  }
}

@property is supported in Chrome 85+, Edge 85+ and Safari 15.4+. Firefox added support in Firefox 128+. For older browsers, the gradient renders but the color animation won't play — a safe progressive enhancement.

Browser Support

Type	Chrome	Firefox	Safari
linear-gradient	26+	16+	6.1+
radial-gradient	26+	16+	6.1+
conic-gradient	69+	83+	12.1+

Frequently Asked Questions

How do I make a CSS gradient border?

CSS has no native gradient-border property. The reliable trick is a double-background with background-clip: border: 2px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #7c6fff, #ff6fb0) border-box;. Want a tool that generates this for you with rounded corners? See our gradient border guide.

Linear vs radial vs conic — which gradient should I use?

Use linear-gradient for backgrounds, buttons, headers — anything where colors flow in a direction. Use radial-gradient for spotlight, sun-like or vignette effects radiating from a point. Use conic-gradient for pie charts, color wheels, loading spinners, or any sweep around a center.

Why is there banding in my gradient?

Banding (visible color steps) happens when the gradient spans a long distance with too few color stops, or on 8-bit displays with similar adjacent colors. Add intermediate color stops to smooth the transition, or add subtle film-grain noise as an overlay. Diagonal gradients band less than perfectly horizontal or vertical ones.

How do I animate a CSS gradient?

Gradients themselves can't transition directly. Two approaches: animate background-position on an oversized gradient (size 300% 300%) for a flowing effect; or use the modern @property API to animate registered custom properties for true color-stop animation. The Animating Gradients section above has working code.

How do I create gradient text in CSS?

Apply the gradient as background, then add background-clip: text and -webkit-text-fill-color: transparent. Works in every modern browser. The Gradient Text section above has copy-paste code.

Are CSS gradients better than image backgrounds?

For solid color transitions, almost always yes. CSS gradients scale to any resolution without quality loss, load instantly with no extra HTTP request, and can be themed with custom properties. Use images only when you need photographic textures or hand-painted artwork.

Want a deep dive into gradient techniques including mesh gradients and advanced animations? Read our complete CSS gradients guide →

Tool last updated: May 2026