Visual CSS Radial Gradient Builder: Glows, Spotlights & Mesh Patterns

A CSS radial gradient radiates colors outward from a central point in a circular or elliptical shape. Unlike linear gradients that transition along a straight line, radial gradients expand from the center — making them the right tool for glows, spotlights, depth effects, and organic background shapes. This guide covers every part of the syntax with copy-ready examples for every use case.

Build radial gradients visually without memorising syntax: Jaconir CSS Gradient Generator — adjust colors, position, and shape in real time, then copy the generated CSS.

Basic Syntax

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

Every part except the color stops is optional. The simplest radial gradient:

/* Ellipse from center, two colors */
background: radial-gradient(#667eea, #764ba2);

With full control:

/* Circle, farthest-corner size, positioned at top left */
background: radial-gradient(circle farthest-corner at 20% 20%, #667eea, #764ba2);

Shape: circle vs ellipse

ellipse (default) — stretches to match the aspect ratio of the element. A wide element produces a wide ellipse, a tall element a tall one.

background: radial-gradient(ellipse, #667eea, #764ba2);

circle — always a perfect circle regardless of element dimensions. The gradient expands uniformly in all directions.

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

Use circle when you want a true spotlight or glow effect. Use ellipse when you want the gradient to fill the element naturally.

Size Keywords

Size controls how far the gradient extends before reaching the final color stop.

farthest-corner (default) — gradient extends to the farthest corner of the element.

background: radial-gradient(circle farthest-corner, #667eea, #764ba2);

closest-side — gradient ends at the nearest edge. Produces a tight, contained gradient.

background: radial-gradient(circle closest-side, #667eea, #764ba2);

farthest-side — gradient ends at the farthest edge.

background: radial-gradient(circle farthest-side, #667eea, #764ba2);

closest-corner — gradient ends at the nearest corner.

background: radial-gradient(circle closest-corner, #667eea, #764ba2);

Practical use: closest-side with a positioned gradient creates tight circular accents. farthest-corner fills the full element with the gradient.

Position

The at keyword sets the center point of the gradient. Accepts any CSS position value.

/* Keywords */
background: radial-gradient(circle at center, #667eea, #764ba2);
background: radial-gradient(circle at top left, #667eea, #764ba2);
background: radial-gradient(circle at bottom right, #667eea, #764ba2);

/* Percentages */
background: radial-gradient(circle at 20% 30%, #667eea, #764ba2);

/* Pixels */
background: radial-gradient(circle at 100px 50px, #667eea, #764ba2);

/* Mixed */
background: radial-gradient(circle at 30% 80px, #667eea, #764ba2);

Shifting the position off-center is what creates realistic glow and spotlight effects — a centered radial gradient looks flat, an off-center one looks like actual light.

Color Stops

Color stops work the same as linear gradients — specify position as a percentage or length.

/* Even distribution (default) */
background: radial-gradient(circle, #667eea, #764ba2, #f5576c);

/* Explicit positions */
background: radial-gradient(circle, #667eea 0%, #764ba2 60%, #f5576c 100%);

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

/* Hold the first color before transitioning */
background: radial-gradient(circle, #667eea 30%, #764ba2 100%);

Using transparent as a color stop is the most common technique for glows and overlays:

/* Glow that fades to transparent */
background: radial-gradient(circle, rgba(102, 126, 234, 0.8), transparent 70%);

Practical Patterns

Spotlight Effect

.spotlight {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15) 0%, transparent 60%),
    #1a1a2e;
}

Glow Behind an Element

.glow-card {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(102, 126, 234, 0.3) 0%,
    transparent 70%
  );
}

Corner Accent

.corner-accent {
  background: radial-gradient(
    circle at top right,
    rgba(245, 87, 108, 0.4) 0%,
    transparent 50%
  );
}

Layered Mesh Gradient

Multiple radial gradients layered on a background color. Each layer is comma-separated:

.mesh {
  background:
    radial-gradient(at 20% 20%, hsla(228, 100%, 74%, 0.8) 0px, transparent 50%),
    radial-gradient(at 80% 10%, hsla(189, 100%, 56%, 0.6) 0px, transparent 50%),
    radial-gradient(at 10% 80%, hsla(355, 100%, 93%, 0.7) 0px, transparent 50%),
    radial-gradient(at 85% 75%, hsla(340, 100%, 76%, 0.5) 0px, transparent 50%);
  background-color: #ffffff;
}

This is how modern SaaS landing pages create the soft colourful mesh background effect — entirely in CSS, no image files.

Donut / Ring Shape

Combine a radial gradient with border-radius: 50% for a pie or donut chart base:

.donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#667eea 0% 65%, #eee 65% 100%);
  /* Hollow centre via mask */
  -webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
  mask: radial-gradient(circle, transparent 55%, black 56%);
}

Dark Mode Radial Background

.dark-hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(102,126,234,0.3), transparent),
    #0f172a;
}

This is the exact pattern used on the Jaconir tool hero sections — a subtle upward glow on a dark background.

Repeating Radial Gradient

repeating-radial-gradient tiles the color stop pattern outward:

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

/* Soft repeating glow */
background: repeating-radial-gradient(
  circle at center,
  rgba(102,126,234,0.15) 0px,
  rgba(102,126,234,0.15) 1px,
  transparent 1px,
  transparent 40px
);

Radial Gradient on Text

Apply a radial gradient as text color using background-clip:

.gradient-text {
  background: radial-gradient(circle at 30% 50%, #667eea, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Browser Support

radial-gradient is supported in all modern browsers and has been since 2012. No prefixes needed for basic usage. The mask property used in the donut example requires -webkit-mask alongside mask for Safari compatibility.

FAQ

What is the difference between radial-gradient and conic-gradient?

radial-gradient radiates outward from a center point in concentric rings. conic-gradient rotates colors around a center point like a color wheel or pie chart. Use radial for glows and depth effects, conic for pie charts and angular patterns.

Can I animate a radial gradient?

CSS gradients cannot be directly transitioned. Animate using background-position with background-size set larger than the element, or use a CSS custom property for the position value and transition that instead. For complex animations, a pseudo-element with opacity transition is the most performant approach.

How do I make a radial gradient responsive?

Use percentage values for position and farthest-corner or closest-side for size — these scale automatically with the element. Avoid fixed pixel values for size in responsive contexts.

Why does my radial gradient look like an ellipse when I want a circle?

You're using ellipse (the default) instead of circle. Add the circle keyword explicitly: radial-gradient(circle, ...).

Conclusion

Radial gradients are the foundation of glow effects, depth, spotlight lighting, and mesh backgrounds in modern CSS. The key properties to know are shape (circle vs ellipse), position (at x% y%), and size keywords (closest-side, farthest-corner). Layer multiple radial gradients with commas for the mesh gradient effect that's everywhere in modern UI design.

Generate your radial gradient: Jaconir CSS Gradient Generator →