Spotlight Background

<div class="spotlight-bg">

  <div class="spotlight-content">
    <span>Spotlight</span>
    <h2>Put the Focus Where It Matters</h2>
    <p>A soft glowing spotlight created with pure CSS.</p>
  </div>

</div>

.spotlight-bg{
  position:relative;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(34,211,238,.28) 0%,
      rgba(59,130,246,.14) 28%,
      transparent 65%
    ),
    #050914;
}

.spotlight-bg::before{
  content:"";

  position:absolute;
  top:-100px;
  left:50%;

  width:360px;
  height:260px;

  transform:translateX(-50%);

  background:rgba(139,92,246,.18);
  border-radius:50%;

  filter:blur(70px);

  animation:spotlightPulse 4s ease-in-out infinite;
}

.spotlight-content{
  position:relative;
  z-index:2;

  max-width:600px;
  padding:30px;

  text-align:center;
}

.spotlight-content span{
  display:inline-block;
  margin-bottom:12px;

  color:#22d3ee;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.spotlight-content h2{
  margin:0 0 12px;

  color:#ffffff;
  font-size:32px;
  line-height:1.2;
}

.spotlight-content p{
  margin:0;

  color:#c7d2e5;
  font-size:15px;
}

@keyframes spotlightPulse{

  0%,
  100%{
    opacity:.45;
    transform:translateX(-50%) scale(.9);
  }

  50%{
    opacity:.9;
    transform:translateX(-50%) scale(1.15);
  }

}

How This Spotlight Background Works

The Spotlight Background creates a focused glow at the top-center of a dark section using CSS gradients, a blurred pseudo-element, and a simple keyframe animation. The HTML contains only the .spotlight-bg wrapper and a .spotlight-content block with a label, heading, and paragraph. The published component does not use JavaScript.

The main .spotlight-bg element starts with the dark #050914 base color. A radial-gradient() is layered above it to create the first part of the spotlight. The gradient uses an ellipse positioned at 50% 0%, which places its center horizontally in the middle and vertically at the top edge of the container.

That elliptical gradient begins with cyan rgba(34,211,238,.28) at 0%. It transitions into a softer blue rgba(59,130,246,.14) at 28% before becoming completely transparent at 65%. The result is a light source that appears to spread downward from the top rather than radiating evenly from the center of the section.

A second glow is created with .spotlight-bg::before. This pseudo-element is positioned at top: -100px and left: 50%, then centered horizontally with translateX(-50%). It measures 360px by 260px, uses border-radius: 50%, and has a translucent purple rgba(139,92,246,.18) background.

The filter: blur(70px) applied to this pseudo-element removes its defined edges and turns the oval into a broad diffused light. Because part of the element begins above the container, only the lower portion of the glow spreads into the visible section. overflow: hidden on the parent keeps the blurred element contained within the background.

The purple glow also runs the spotlightPulse animation every four seconds with ease-in-out timing and infinite repetition. At the start and end, its opacity is .45 and its scale is .9. At the halfway point, opacity increases to .9 while the element scales to 1.15. This makes the light gently expand and become brighter before returning to its initial state. For more information about the blur used to soften this element, see the MDN CSS filter documentation.

The content remains independent of the decorative layers. .spotlight-content uses position: relative with z-index: 2, a maximum width of 600px, 30px padding, and centered text. The parent uses flexbox to center this block vertically and horizontally within its 320px minimum height.

Customizing the Spotlight Background

The spotlight can be adjusted by changing the existing gradient, pseudo-element, animation, and typography values.

• Replace the #050914 base color to match a different dark website theme.
• Change rgba(34,211,238,.28) and rgba(59,130,246,.14) to give the main elliptical spotlight a different color.
• Adjust ellipse at 50% 0% to reposition the main gradient or change its shape.
• Modify the 28% and 65% gradient stops to control how quickly the spotlight fades into the dark background.
• Change the pseudo-element’s 360px width, 260px height, or top: -100px position to alter the secondary glow.
• Replace rgba(139,92,246,.18) if the purple glow should use another accent color.
• Adjust filter: blur(70px) to make the secondary light more concentrated or more diffused.
• Change the 4s animation duration, .45 and .9 opacity values, or .9 and 1.15 scale values to modify the pulsing behavior.

Where to Use This Spotlight Background

The top-centered lighting makes this component useful when a page section needs to draw attention toward content positioned near the middle.

• Hero sections with a headline and short supporting copy.
• SaaS and software landing-page introductions.
• Product announcements that need a focused background treatment.
• Developer portfolio headers and project introductions.
• Call-to-action sections with centered buttons and text.
• Dark-theme pricing or feature introductions.
• Technology pages where a subtle animated glow can sit behind important content.

For a different background treatment that uses repeated angular shapes instead of a focused light source, try the Geometric Pattern Background component. Since this spotlight uses only CSS, it can also serve as a decorative layer behind normal HTML content without requiring any JavaScript setup.

Frequently Asked Questions

Does the Spotlight Background require JavaScript?

No. The published component has no JavaScript. Its spotlight, blur, pulse animation, positioning, and content layout are all implemented with CSS.

How is the spotlight effect created?

The component combines an elliptical radial-gradient() on the main background with a separate purple ::before pseudo-element. The pseudo-element is blurred by 70px, producing a softer secondary light near the top-center.

What creates the pulsing effect?

The spotlightPulse keyframes animate the pseudo-element’s opacity and scale. It moves from .45 opacity and .9 scale to .9 opacity and 1.15 scale before returning to its original state.

Can the spotlight be moved to another part of the section?

Yes. The main gradient position is controlled by ellipse at 50% 0%, while the secondary glow uses top: -100px, left: 50%, and translateX(-50%). Changing these existing positioning values moves the visual focus.

The Spotlight Background keeps its implementation compact by combining a layered radial gradient with one animated, blurred pseudo-element, creating a focused dark-section backdrop without images or JavaScript.