DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

CSS Gradient Generator Online: Create Linear, Radial & Conic Gradients Free

#css #webdev #frontend #design

CSS Gradient Generator Online: Create Linear, Radial & Conic Gradients Free

CSS gradients are one of the most powerful design tools available to web developers — they're pure CSS (zero extra HTTP requests), infinitely scalable, and can replace background images for most UI elements. A CSS gradient generator lets you build them visually without memorizing syntax.

This guide explains the three gradient types, how to use a generator effectively, and tips for creating gradients that look polished and professional.

What Is a CSS Gradient Generator?

A CSS gradient generator is an online tool that lets you pick colors, adjust stops, choose direction, and preview the result in real time. When you're happy with the result, you copy the generated CSS and paste it directly into your stylesheet — no editing raw syntax required.

Try it now: DevPlaybook CSS Gradient Generator — build any gradient visually and copy the CSS instantly.

The Three CSS Gradient Types

1. Linear Gradient

A linear gradient transitions colors along a straight line.

/* Basic direction keywords */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to bottom, #f093fb, #f5576c);
background: linear-gradient(135deg, #4facfe, #00f2fe);

/* Multiple color stops */
background: linear-gradient(
  to right,
  #ff6b6b 0%,
  #feca57 33%,
  #48dbfb 66%,
  #ff9ff3 100%
);
Enter fullscreen mode Exit fullscreen mode

When to use: Hero backgrounds, button fills, progress bars, dividers.

2. Radial Gradient

A radial gradient radiates colors outward from a center point.

/* Circle from center */
background: radial-gradient(circle, #a18cd1, #fbc2eb);

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

/* Spotlight effect */
background: radial-gradient(circle at 50% 0%, #ffffff 0%, transparent 60%);
Enter fullscreen mode Exit fullscreen mode

When to use: Glowing effects, spotlight highlights, circular UI elements, avatar borders.

3. Conic Gradient

A conic gradient rotates colors around a center point, like a color wheel or pie chart.

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

/* Pie chart segments */
background: conic-gradient(
  #4facfe 0deg 120deg,
  #00f2fe 120deg 240deg,
  #667eea 240deg 360deg
);
Enter fullscreen mode Exit fullscreen mode

When to use: Pie charts, progress rings, decorative color wheels, loading spinners.

Key Features of a Good CSS Gradient Generator

Feature Why It Matters
Real-time preview See changes instantly as you adjust colors
Color stop control Drag stops to precise positions
Direction picker Visual angle control for linear gradients
Multiple color formats HEX, RGB, HSL — use whatever your design system uses
Vendor prefix output Auto-generate -webkit- prefixes if needed
Copy CSS button One-click copy of the final output
Gradient presets Quick starting points for common styles

How to Use a CSS Gradient Generator

  1. Open DevPlaybook CSS Gradient Generator
  2. Choose gradient type — linear, radial, or conic
  3. Set start and end colors using the color pickers
  4. Add color stops for multi-color gradients
  5. Adjust direction (angle for linear, center position for radial)
  6. Preview in the live preview panel
  7. Copy the generated CSS property
  8. Paste into your stylesheet: 
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
Enter fullscreen mode Exit fullscreen mode

Gradient Design Tips

Use 2-3 Colors Maximum

More than 3 colors usually looks muddy. Stick to 2 colors for clean, professional gradients. Use 3 only when intentional (like a sunset or aurora effect).

Keep Color Stop Distance Consistent

Uneven color stop distribution creates jarring transitions. For smooth gradients, keep stops evenly spaced unless you want a specific effect.

Test for Contrast

Dark text on gradient backgrounds can be hard to read. Use a color contrast checker to ensure your text meets WCAG accessibility requirements.

Use HSL for Color Harmony

Colors defined in HSL (hue-saturation-lightness) are easier to harmonize. Keep the same saturation and lightness, vary only the hue for analogous color gradients.

/* Harmonious gradient using HSL */
background: linear-gradient(
  to right,
  hsl(200, 70%, 50%),
  hsl(240, 70%, 50%)
);
Enter fullscreen mode Exit fullscreen mode

Consider Dark Mode

Provide alternate gradients for dark mode users:

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

@media (prefers-color-scheme: dark) {
  .card {
    background: linear-gradient(135deg, #2d3561, #4a2040);
  }
}
Enter fullscreen mode Exit fullscreen mode

Popular Gradient Presets

Here are common gradient styles with their CSS:

/* Sunset */
background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);

/* Ocean */
background: linear-gradient(180deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);

/* Midnight */
background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);

/* Peach */
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

/* Forest */
background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);

/* Aurora */
background: linear-gradient(90deg, #10b981 0%, #34d399 33%, #6ee7b7 66%, #a7f3d0 100%);
Enter fullscreen mode Exit fullscreen mode

CSS Gradient vs Background Image

Factor CSS Gradient Background Image
File size ~200 bytes (inline CSS) 50–500 KB
HTTP requests 0 1+
Infinite scaling ✅ ❌
CSS animations ✅ Limited
Browser support 98%+ 100%
Design flexibility Limited to color transitions Any visual

Use gradients for backgrounds, overlays, and decorative elements. Use images for photographs and complex illustrations.

Frequently Asked Questions

Do CSS gradients work in all browsers?

CSS gradients (linear-gradient, radial-gradient, conic-gradient) are supported in all modern browsers with 98%+ coverage. You don't need vendor prefixes for modern projects. For legacy IE support, you'd need a solid color fallback.

Can I animate a CSS gradient?

Standard background-image gradients can't be smoothly animated with CSS transitions. The workaround is to use background-position with an oversized gradient, or use CSS custom properties with JavaScript to interpolate values:

.button {
  background-size: 200% 200%;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  transition: background-position 0.5s ease;
}
.button:hover {
  background-position: right center;
}
Enter fullscreen mode Exit fullscreen mode

How do I create a transparent gradient overlay?

Use rgba or transparent as a color stop:

/* Dark overlay for text readability */
background: linear-gradient(
  to bottom,
  transparent 0%,
  rgba(0, 0, 0, 0.7) 100%
);
Enter fullscreen mode Exit fullscreen mode

What's the difference between to right and 90deg?

They're equivalent. to right means left→right, which corresponds to 90 degrees. to bottom = 180 degrees. Using degrees gives you more precise control (e.g., 135deg for diagonal).

Can I use a gradient as a border?

Yes, using border-image or a pseudo-element:

.card {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-box;
}
Enter fullscreen mode Exit fullscreen mode

Related Tools

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)