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

<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>

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.