Jaconir

CSS Gradient Generator: Build Linear, Radial and Conic Gradients Free

March 7, 2026
8 min read

CSS gradients are one of the most powerful visual tools in web design — no image files, no HTTP requests, infinitely scalable, and fully animatable. But the syntax can be unintuitive, especially for radial and conic gradients. This guide covers every gradient type with copy-ready examples, plus a free visual builder so you can generate exactly what you need without memorising syntax.

Build any gradient visually with Jaconir CSS Gradient Generator — adjust colors, angles, and positions, then copy the CSS in one click.

Linear Gradients

Linear gradients transition colors along a straight line. The basic syntax:

background: linear-gradient(direction, color1, color2);

Direction Options

  • to bottom — top to bottom (default)
  • to right — left to right
  • to bottom right — diagonal
  • 45deg — any angle in degrees

Common Linear Gradient Examples

/* Simple two-color */
background: linear-gradient(to right, #667eea, #764ba2);

/* Three-color */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

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

/* Dark overlay for text readability over images */
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%);

/* Subtle grey for cards */
background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);

Color Stop Positions

By default, colors are evenly distributed. You can control exact positions with percentages:

/* Hold first color for 40%, then transition */
background: linear-gradient(to right, #667eea 40%, #764ba2 100%);

/* Hard stop — no transition, instant color change */
background: linear-gradient(to right, #667eea 50%, #764ba2 50%);

Radial Gradients

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

background: radial-gradient(shape size at position, color1, color2);

Common Radial Gradient Examples

/* Simple circle */
background: radial-gradient(circle, #667eea, #764ba2);

/* Ellipse (default) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Positioned off-center — top left glow */
background: radial-gradient(circle at 20% 20%, #667eea, transparent);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 25% 25%, rgba(102,126,234,0.4), transparent 50%),
  radial-gradient(circle at 75% 75%, rgba(118,75,162,0.4), transparent 50%);

/* Spotlight effect */
background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%), #1a1a2e;

Size Keywords

  • closest-side — gradient ends at the nearest edge
  • farthest-side — gradient ends at the farthest edge
  • closest-corner — gradient ends at the nearest corner
  • farthest-corner — default, gradient ends at the farthest corner

Conic Gradients

Conic gradients rotate colors around a center point — useful for pie charts, color wheels, and starburst effects:

background: conic-gradient(from angle at position, color1, color2);

Common Conic Gradient Examples

/* Basic pie chart — 3 segments */
background: conic-gradient(#667eea 0% 33%, #f5576c 33% 66%, #4facfe 66% 100%);

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

/* Starburst */
background: conic-gradient(from 0deg, #fff 0deg 10deg, #000 10deg 20deg);

/* Donut chart effect (with border-radius) */
background: conic-gradient(#667eea 0% 65%, #eee 65% 100%);
border-radius: 50%;

Repeating Gradients

All three gradient types have a repeating variant that tiles the pattern:

/* Repeating stripes */
background: repeating-linear-gradient(
  45deg,
  #667eea,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

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

Practical UI Patterns

Hero Section Background

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

Card Hover Glow

background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.1), transparent 60%);

Text Gradient

background: linear-gradient(to right, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Mesh Gradient (Layered Radials)

background:
  radial-gradient(at 40% 20%, hsla(228,100%,74%,1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
  radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%);
background-color: #ffffff;

Animating Gradients

CSS gradients cannot be directly transitioned, but you can animate them using background-position with background-size:

/* Animated gradient button */
.button {
  background: linear-gradient(270deg, #667eea, #764ba2, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 3s ease infinite;
}

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

FAQ

How do I generate a CSS gradient without writing code?

Use Jaconir CSS Gradient Generator — pick your colors and type visually, then copy the generated CSS. No syntax memorisation needed.

What's the difference between linear and radial gradients?

Linear gradients transition along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate outward from a central point in a circle or ellipse. Conic gradients rotate around a center point like a color wheel.

Can I use multiple gradients on one element?

Yes — stack them with commas. Later gradients in the list appear behind earlier ones. This is how mesh gradients work: multiple radial gradients layered over each other.

Do CSS gradients affect performance?

CSS gradients are GPU-accelerated and significantly faster than image files. They also scale perfectly at any resolution and don't require HTTP requests. Use them freely.

Conclusion

CSS gradients give you professional visual depth without a single image file. Once you understand the three types — linear, radial, and conic — and their color stop syntax, you can produce almost any gradient effect directly in CSS. Use the generator to prototype visually, then fine-tune the values in code.

Build your gradient now: Jaconir CSS Gradient Generator →