webdevpuneet.com

Related Snippets

63 in Heroes category
48–53 of 60

Lamp Header

Animated Gradient CTA

CTA Banner Section

App Download Hero

Word Flip Hero

Video Background Hero

Lamp Header — Free HTML CSS JS Spotlight Hero Snippet

Lamp Header · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsText EffectsCSS AnimationAccessibilityLanding Page

Copy & paste

Source Code

<section class="lh-hero" id="lhHero">
  <div class="lh-lamp" aria-hidden="true">
    <span class="lh-cone lh-left"></span>
    <span class="lh-cone lh-right"></span>
    <span class="lh-glow-wide"></span>
    <span class="lh-glow-core"></span>
    <span class="lh-line"></span>
  </div>
  <div class="lh-content">
    <span class="lh-pill">Spotlight hero</span>
    <h1 class="lh-title">Build something<br>that glows</h1>
    <p class="lh-sub">Two beams converge on a glowing filament and light up your headline. Pure CSS, one accent color.</p>
    <div class="lh-actions">
      <button type="button" class="lh-btn">Start free</button>
      <button type="button" class="lh-btn lh-ghost">See how it works</button>
    </div>
    <div class="lh-swatches" role="group" aria-label="Lamp color">
      <span class="lh-swatch-label">Lamp color</span>
      <button type="button" class="lh-swatch is-on" data-color="#22d3ee" style="--s:#22d3ee" aria-label="Cyan"></button>
      <button type="button" class="lh-swatch" data-color="#a78bfa" style="--s:#a78bfa" aria-label="Violet"></button>
      <button type="button" class="lh-swatch" data-color="#f472b6" style="--s:#f472b6" aria-label="Pink"></button>
      <button type="button" class="lh-swatch" data-color="#34d399" style="--s:#34d399" aria-label="Green"></button>
      <button type="button" class="lh-swatch" data-color="#fbbf24" style="--s:#fbbf24" aria-label="Amber"></button>
    </div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Conic-gradient cones
Two mirrored beams angle into the center.
Masked beam falloff
Intersected masks fade the light at the bottom and outer edge.
Widening reveal line
A glowing filament switches on from zero width.
Half-clipped glow
Blurred glows cut at the line, so light pours out of the filament.
Choreographed entrance
Light reveals, then content arrives into it.
Lit gradient title
Top-down text gradient matches the lamp.
Radial stage vignette
Dark surround focuses the eye center.
One-variable theming
--lh-c recolors the entire lamp, with live swatches to try it.
Presentable hero
Pill badge, two buttons and a readable gradient headline included.

About this UI Snippet

Lamp Header — Converging Light Cones and a Glowing Reveal Line

Screenshot of the Lamp Header snippet rendered live

The lamp header is the cinematic hero where two beams of light angle down from the top of the screen and meet at a bright horizontal line — like a stage spotlight — with the headline rising into the pool of light beneath it. This snippet recreates that dramatic effect entirely with CSS for the lighting, plus a tiny vanilla JavaScript helper to show how themeable it is.

Light cones from conic gradients

Each beam is a .lh-cone element filled with a conic-gradient that fades from the accent color to transparent. The left cone sits to the left of the center line with its gradient starting at from 70deg at center top, and the right cone mirrors it with from 290deg, so the lit rays of both angle in toward the middle, like the two sides of a stage spotlight. Two stacked masks, intersected with mask-composite, fade each beam out: one fades the bottom so the light dissipates as it falls, and one fades the outer edge so there is no hard side boundary. Because the fade is a mask rather than a dark overlay, the beams work on any background.

The filament and the glow

Where the beams meet sits .lh-line, a 2px bar in the accent color with a box-shadow halo, so it reads as a glowing filament. Two blurred ellipses (.lh-glow-wide and .lh-glow-core) sit on that line and are cut in half with clip-path: inset(50% ...), so only the half below the line shows. That makes the light look like it pours out of the line instead of floating around it.

Choreographed entrance

The effect is sequenced for drama. The beams and line widen outward from the center (lhCone, lhWiden) and the core glow grows (lhCore) over the first second, then the content block fades up with lhUp on a short delay, so the light switches on first and the headline arrives into it, rather than everything appearing at once. The title itself uses a top-to-bottom background-clip: text gradient from white to slate, giving it a lit-from-above sheen consistent with the lamp metaphor.

The radial stage background

The hero's background is a radial gradient anchored above the top edge (at 50% -10%), darkening from a faint slate glow down to near-black. That subtle vignette makes the lamp light feel like it's emerging from offscreen darkness and keeps the focus dead center.

One custom property drives the color

The beams, line, glows, pill and primary button all read the same custom property, --lh-c, on the hero. The swatch row under the buttons sets it with one line of JavaScript (hero.style.setProperty('--lh-c', color)), and the whole lamp recolors at once. In your own project, set --lh-c to your brand color in CSS and delete the script.

Customizing it

Change --lh-w to widen or narrow the whole lamp, change the conic from angles to spread the beams, retime lhCone, lhWiden and lhCore for a slower switch-on, or move the lamp by changing .lh-lamp { top }. Replace the swatches with a real theme toggle, or remove them. Pair it with a shimmer button call to action or a scroll velocity marquee band below for a bold landing sequence.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSTwo light cones converge on a glowing line at the top center.
  2. 2
    Watch it switch onThe line widens and a soft glow rises as the headline fades up into it.
  3. 3
    Read the lit headlineThe title carries a top-down gradient sheen matching the lamp.
  4. 4
    Click a color swatchThe whole lamp, pill and button switch to that accent color.
  5. 5
    Set your brand colorSet --lh-c once in CSS to recolor beams, line, glows and button.
  6. 6
    Retime the entranceAdjust the lhCone, lhWiden and lhCore durations for more drama.

Real-world uses

Common Use Cases

Product launch heroes
Spotlight a headline above a shimmer button, with two conic-gradient cones converging on a glowing line.
Feature tour openers
Open a page that flows into a feature tabs showcase, with a widening filament that switches on from zero width.
Event microsites
Pair with a scroll velocity marquee for drama, using a vertical mask to fade the light as it falls.
Portfolio intros
Offer a dramatic alternative to a minimal hero, with a blurred ellipse lighting the headline area.
Announcement pages
Light up a reveal over an animated grid background, and study conic-gradient spotlights as a CSS lighting reference.
Related: Hero with Animated Scroll Cue
See the Hero with Animated Scroll Cue for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each beam is an element filled with a conic-gradient from the accent color to transparent. The left one starts at 70deg and the right one at 290deg, so their lit rays angle in toward the center. Two intersected mask-image gradients fade each beam at the bottom and at its outer edge so the light dissipates.

The beams and the line where they meet widen outward from the center (lhCone and lhWiden), and a core glow grows with lhCore. The content fades up on a short delay so the light reveals before the text arrives.

Yes. The beams, line, glows, pill and button all read the --lh-c custom property on the hero. The swatches change it with setProperty, so one value recolors everything, and you can set it once in CSS to match your brand.

The title uses a background-clip: text gradient running top-to-bottom from white to slate gray. That makes the top of each letter brighter than the bottom, consistent with light coming from the lamp overhead, which ties the typography into the spotlight metaphor.

The markup and CSS port directly. Pass the accent color as a prop and set --lh-c on the hero element, so theming is one value. The entrance keyframes run on mount automatically; if you re-trigger them, toggle a key or class. Replace the swatches with your real theme control. In Tailwind, build the cones with bg-[conic-gradient(...)] and mask utilities.