CSS Radial Gradients

Subject: css

CSS Radial Gradients

Radial gradients in CSS create color transitions that radiate outward from a central point. Unlike linear gradients that move along a straight line, radial gradients spread in circles or ellipses—making them ideal for spotlight effects, buttons, backgrounds, and design accents.

Syntax

🚀 Try it in Compiler

Parameters:

  • Shape (optional): circle or ellipse
  • Size (optional): closest-side, farthest-side, closest-corner, farthest-corner
  • Position (optional): center, top left, 50% 50%, etc.
  • Color Stops: List of colors used in the gradient

Example 1: Default Radial Gradient

🚀 Try it in Compiler

This creates an elliptical gradient starting from the center and radiating outward.

Example 2: Circular Radial Gradient from Top Left

🚀 Try it in Compiler

This places the gradient center at the top-left of the element and makes it circular.

Example 3: Using Shape and Size

🚀 Try it in Compiler
  • circle makes the shape round
  • closest-side limits the radius to the closest edge from center

Transparency with Radial Gradients

🚀 Try it in Compiler

This is useful for creating overlay or spotlight effects and can be applied over images or sections.

Best Practices

  • Ensure text contrast when using gradients as backgrounds
  • Use circle for buttons or focus highlights
  • Use rgba() with transparency for overlays and depth
  • Avoid overusing gradients to prevent visual clutter

Key Takeaways

  • Radial gradients spread color from a center point outward
  • Shape can be set as circle or ellipse
  • Customize with size, position, and color stops
  • Great for UI design, focus areas, and visual layering
Next: CSS Conic Gradients