CSS Gradient Generator

You need a hero section background that transitions from deep blue to purple to pink at a 135-degree angle. Writing linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #ec4899 100%) by hand means guessing at color stop positions and hex values, reloading to check, then spending 10 minutes adjusting percentages to get the transition points right. And that’s just linear — radial and conic gradients add center positioning and angle sweep that make the mental model even harder.

Why This Tool (Not a Code Editor)

CSS gradients are one of those properties where the syntax is simple but the result is impossible to predict from the code alone. A 10-degree angle change or a 5% color stop shift can dramatically change the look. This tool gives you a visual canvas for linear, radial, and conic gradients with draggable color stops, angle controls, and real-time preview — then generates the CSS with vendor prefixes if needed. Everything runs in your browser; no color or gradient data is sent anywhere.

CSS Gradients Explained

CSS gradients let you display smooth transitions between two or more colors without needing image files. Introduced in CSS3, they are widely used for backgrounds, buttons, hero sections, and decorative elements. There are three types: linear (straight line), radial (circular/elliptical), and conic (angular sweep).

Using CSS gradients instead of images reduces HTTP requests, scales infinitely without pixelation, is easily animated, and can be modified programmatically with JavaScript.

Linear Gradients

A linear gradient transitions colors along a straight line defined by an angle. The syntax is:

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);

• Angle: Determines the direction. 0deg flows bottom to top; 90deg flows left to right; 135deg flows diagonally top-left to bottom-right.
• Color stops: Each stop specifies a color and its position. You can use any valid CSS color: hex, rgb(), hsl(), or oklch().
• Multiple stops: Add as many color stops as you like for multi-color gradients.

Common angle presets:

• to right (or 90deg): horizontal left-to-right
• to bottom (or 180deg): top-to-bottom
• 45deg: diagonal top-right to bottom-left
• 135deg: diagonal top-left to bottom-right

Real-world linear gradient patterns

/* Hero section — purple to pink */
.hero {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}

/* Subtle card depth */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Hard stripe (no transition) */
.stripe {
  background: linear-gradient(90deg, #ef4444 50%, #3b82f6 50%);
}

/* Three-color sunset */
.sunset {
  background: linear-gradient(180deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
}

Radial Gradients

A radial gradient radiates colors outward from a center point:

background: radial-gradient(circle at center, #6366f1 0%, #ec4899 100%);

• Shape: circle produces a circular gradient; ellipse (default) stretches to fill the element’s proportions.
• Position: The center point — at center, at top left, at 30% 70%, etc.
• Size keywords: closest-side, farthest-side, closest-corner, farthest-corner (default).

/* Spotlight effect */
.spotlight {
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.3) 0%, transparent 60%);
}

/* Glow button */
.glow-button {
  background: radial-gradient(ellipse at center, #6366f1 0%, #4338ca 100%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

/* Vignette overlay */
.vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);
}

Conic Gradients

Conic gradients sweep colors around a center point like a color wheel or pie chart:

background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);

• from angle: Starting angle for the sweep (default 0deg)
• at position: Center point (default center)
• Color stops: Colors are distributed around the 360° sweep

/* Color wheel */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Pie chart — 30% red, 45% blue, 25% green */
.pie-chart {
  background: conic-gradient(
    #ef4444 0% 30%,
    #3b82f6 30% 75%,
    #10b981 75% 100%
  );
  border-radius: 50%;
}

/* Checkerboard pattern */
.checkerboard {
  background: conic-gradient(#000 90deg, #fff 90deg 180deg, #000 180deg 270deg, #fff 270deg);
  background-size: 40px 40px;
}

How Color Stops Work

Color stops define exactly where each color appears along the gradient axis:

• 0% — the starting point
• 100% — the ending point
• Values in between control the transition midpoints

If you skip a position, the browser distributes stops evenly. You can create sharp edges (no transition) by placing two stops at the same position:

/* Hard red-to-blue split at 50% */
background: linear-gradient(90deg, #ef4444 50%, #3b82f6 50%);

Hint positions (CSS Gradients Level 4) let you control the midpoint of a transition:

/* Color transition midpoint at 30% instead of 50% */
background: linear-gradient(90deg, #6366f1, 30%, #ec4899);

Animating Gradients

CSS gradients themselves are not directly animatable (they’re background images, not colors). The workaround is to animate a CSS custom property or use background-position on a larger gradient:

/* Animated gradient via background-position */
.animated-gradient {
  background: linear-gradient(270deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 300% 300%;
  animation: gradient-shift 4s ease infinite;
}

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

/* Animated via @property (Chrome 85+, Firefox 128+) */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rotating-gradient {
  background: conic-gradient(from var(--gradient-angle), #6366f1, #ec4899, #6366f1);
  animation: rotate 4s linear infinite;
}

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

Layering Gradients

Multiple gradients can be layered using comma separation. The first gradient is on top:

/* Gradient overlay on top of a solid color */
.card {
  background:
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    linear-gradient(135deg, #6366f1, #ec4899);
}

/* Noise texture + gradient (using SVG data URI) */
.textured {
  background:
    url("data:image/svg+xml,..."),
    linear-gradient(135deg, #6366f1, #ec4899);
}

Tailwind CSS Gradient Utilities

If you’re using Tailwind, gradient utilities map directly to CSS gradients:

<!-- Linear gradient: indigo to pink -->
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">

<!-- Custom gradient in Tailwind v3+ -->
<div class="bg-[linear-gradient(135deg,#6366f1,#ec4899)]">

For complex gradients not covered by Tailwind utilities, paste the generated CSS into a style attribute or a @layer utilities block.

Frequently Asked Questions

How do I make a diagonal gradient in CSS? Use an angle between 0deg and 90deg (or 90deg to 180deg) for diagonal directions. 45deg goes bottom-left to top-right; 135deg goes top-left to bottom-right. This tool lets you set any angle from 0 to 360.

Can I use more than two colors in a CSS gradient? Yes. Add as many color stops as you like. This tool supports unlimited stops — click “Add Stop” to insert more colors at custom positions along the gradient axis.

What is the difference between linear-gradient and radial-gradient? linear-gradient transitions colors in a straight line at a specified angle. radial-gradient radiates colors outward from a center point in a circular or elliptical pattern. conic-gradient sweeps colors around a center point like a clock face.

Does this gradient generator work in all browsers? Linear and radial gradients are supported in all modern browsers since 2013. Conic gradients require Chrome 69+, Firefox 83+, Safari 12.1+. The @property animation technique requires Chrome 85+ or Firefox 128+.

Can I use gradients on text? Yes, with background-clip: text:

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

Is the generated CSS compatible with Tailwind CSS? The generated CSS can be used in Tailwind’s style prop or @layer directives. For Tailwind utilities, use the bg-gradient-to-* utilities with from-, via-, and to- color classes.

Does this tool process my data on a server? No. All gradient generation happens entirely in your browser using JavaScript. No data is transmitted to any server.