CSS

CSS

🎯 What is radial-gradient()?

radial-gradient() creates a gradient that starts from the center and expands outward in a circular or elliptical shape.

It is commonly used for:

  • spotlight effects
  • glowing backgrounds
  • circular lighting
  • soft color transitions
  • modern UI effects

🧩 Simple Definition

CSS
radial-gradient() = creates a circular or elliptical color transition

πŸ’‘ Basic Syntax

CSS

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

🧠 Parameters

radial-gradient() has four main parts:

  • 1. Shape
  • 2. Size
  • 3. Position
  • 4. Colors

πŸ”Ή 1. Shape

Defines the shape of the gradient.

Value Description
circle Creates a perfect circle
ellipse Creates an oval shape

Example

CSS
background: radial-gradient(circle, red, blue);

πŸ‘‰ Creates a circular gradient.

πŸ”Ή 2. Size

Defines how far the gradient spreads.

Value Description
closest-side Extends to nearest side
farthest-side Extends to farthest side
closest-corner Extends to nearest corner
farthest-corner Extends to farthest corner

🧠 Most Common Value

CSS
farthest-corner

πŸ‘‰ Usually creates the smoothest full-area gradient.

πŸ”Ή 3. Position

Defines where the center of the gradient starts.

Common Positions

Value Description
at center Starts from the center
at top left Starts from top-left corner
at top right Starts from top-right corner
at bottom left Starts from bottom-left corner
at bottom right Starts from bottom-right corner

πŸ”Ή 4. Colors

Defines the colors used in the gradient.

The first color starts at the center, while the remaining colors spread outward.

🧩 Basic Examples

πŸ”Ή 1. Simple Circular Gradient

CSS
background: radial-gradient(circle, red, yellow);

πŸ‘‰ Red begins in the center and smoothly transitions into yellow.

πŸ”Ή 2. Elliptical Gradient

CSS

background: radial-gradient(
  ellipse,
  lightblue,
  blue
);

πŸ‘‰ Creates an oval-shaped transition from light blue to dark blue.

πŸ”Ή 3. Gradient Starting from a Corner

CSS

background: radial-gradient(
  circle at top left,
  pink,
  purple
);

πŸ‘‰ The gradient starts in the top-left corner and spreads outward.

πŸ”Ή 4. Using Size Values

CSS

background: radial-gradient(
  circle farthest-side at center,
  orange,
  black
);

πŸ‘‰ The gradient extends toward the farthest side of the element.

🎨 Practical Example

Spotlight Effect

CSS

.hero {

  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.8),
    rgba(0,0,0,0.9)
  );

}

πŸ‘‰ Creates a spotlight-style lighting effect.

🎨 Combining with Other Backgrounds

Gradients can be layered with images.

Example

CSS

.hero {

  background-image:
    radial-gradient(
      circle,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.8)
    ),
    url("hero.jpg");

}

πŸ‘‰ Adds a dark radial overlay over the image.

⚠️ Important Notes

  • radial-gradient() is treated as a background image.
  • No actual image file is required.
  • Gradients automatically scale responsively.

This makes them lightweight and performance-friendly.

βš–οΈ Difference Between linear-gradient() and radial-gradient()

Property Transition Style
linear-gradient() Straight-line transition
radial-gradient() Circular or elliptical transition

🧠 Common Use Cases

radial-gradient() is commonly used for:

  • spotlight effects
  • glowing buttons
  • hero sections
  • soft backgrounds
  • artistic UI designs
  • dark vignette overlays

🎨 Example: Glowing Button

CSS

button {

  background: radial-gradient(
    circle,
    #00ffff,
    #0066ff
  );

}

πŸ‘‰ Creates a glowing modern button effect.

CSS Repeating Linear Gradient
CSS Repeating Radial Gradient