Backgrounds and Gradients

Radial Gradient Panel

A spotlight panel starts with the default ellipse, switches to a circle, offsets the center, and finally rounds and constrains the panel for a card layout.

Program

radial-gradient paints a ramp that radiates from a point. The shape, center, and stops decide how the rings of color fan out.

radial_gradient_panel.html
Visuals: captured from real browser rendering
<style>
.panel { background-image: radial-gradient(#fde68a, #b45309); color: white; padding: 28px; }
.panel { background-image: radial-gradient(circle, #fde68a, #b45309); }
.panel { background-image: radial-gradient(circle at 30% 30%, #fde68a, #b45309); }
.panel { border-radius: 16px; max-width: 420px; }
</style>

<section class="panel">
  <h2>Spotlight</h2>
  <p>Radial gradients form rings of color</p>
</section>

  1. Paint the default radial ellipse.

    A warm ellipse glows from the center of the panel.
    Without a shape keyword the ramp defaults to an ellipse fitting the box.

  2. Switch the ramp to a circle.

    The bright center becomes a circle instead of an ellipse.
    A circle keyword keeps the radius uniform on both axes.

  3. Move the bright center off center.

    The spotlight now glows from the upper left corner.
    A position descriptor moves the center of the radial ramp.

  4. Frame the panel with rounded corners and a width.

    The radial gradient now sits inside a rounded card.
    A radius and width constraint turn the panel into a card.
radial-gradient radial-gradient paints a ramp that radiates from a chosen center.
gradient shape The circle and ellipse keywords change how the ramp expands.