Background effects

Subtle gradient glows and ambient lighting effects used to create visual hierarchy and draw attention to key sections.

Beam Glow

Soft radial glow for section backgrounds. Creates subtle visual emphasis without overwhelming content.

Content receives a subtle glow that creates depth without distraction.

Gradient

radial-gradient(ellipse 100% 25% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, transparent 70%)

Edge mask

Horizontal fade from transparent edges to full opacity center (30%–70%)

Component

<BeamGlow />

Usage

CTA sections, mission statements, and any centered content that benefits from subtle ambient emphasis.

Live pages

Add BeamGlow as a child of any relatively positioned section container.

import { BeamGlow } from "@/components/BeamGlow";

<Section className="relative">
  <BeamGlow />
  {/* Your content here */}
</Section>

The parent container must have position: relative for the absolute positioning to work correctly.