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 a bright color to transparent, then skewed inward so the two cones angle toward each other at the top center. A vertical mask-image gradient fades each cone to transparent at the bottom, so the light appears to dissipate as it falls rather than ending in a hard edge. A slight blur(2px) softens the cone edges into a glow. The left cone is mirrored with scaleX(-1) so the pair is symmetric around the center line.

The reveal line and glow

Where the cones meet sits a thin horizontal .lh-line — a gradient that's transparent at both ends and bright cyan in the middle, with a box-shadow halo so it reads as a glowing filament. On load it animates from zero width outward via the lhWiden keyframe, so the lamp appears to "switch on" and spread. Behind it, a heavily blurred .lh-glow ellipse rises and fades in with lhRise, creating the soft pool of light that the headline sits in.

Choreographed entrance

The effect is sequenced for drama. The line widens and the glow rises over the first 2.4 seconds, while the content block fades up with lhUp on a 0.3s delay — so the light reveals 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.

Live theming via JavaScript

The lighting is pure CSS, but to demonstrate how easily it re-themes, double-clicking the hero cycles the beam through five colors. applyTheme rewrites the conic gradients, the line gradient and shadow, the glow color, and the button in one pass — showing that the whole lamp is driven by a single accent color you could wire to a CSS custom property or a theme switch. Swap this for your brand color and the entire effect recolors.

Customizing it

Adjust the cone skewX angles to widen or narrow the beams, change the line and glow sizes, retime the lhWiden and lhRise durations for a slower switch-on, or anchor the radial background differently. Replace the double-click theming with a real theme toggle. Pair it with a shimmer button call to action or a scroll velocity marquee band below for a bold landing sequence.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not have to reason through the layered gradients on your own. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the conic-gradient plus skewX plus mask-image combination produces two beams that converge and fade out at the bottom, or why the lhWiden and lhRise keyframes are timed to finish just before the content's lhUp animation starts. The same assistant can help optimize it, for example checking whether stacking blur filters on the cones and the glow ellipse is costly to repaint on lower-end GPUs, or whether the applyTheme function's four separate style rewrites could be collapsed into a single CSS custom property update. It is just as useful for extending the effect, such as wiring the accent color to a real theme toggle instead of double-click cycling, adding a second pair of narrower beams for a busier stage look, or making the lamp intensity respond to scroll position. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "lamp header" hero in plain HTML, CSS, and JavaScript using only conic-gradient beams and CSS keyframe animations for the lighting — no canvas, no SVG filters, no animation library.

Requirements:
- Two beam elements positioned at the top center of the hero, each filled with a conic-gradient that fades from a bright accent color to transparent, then skewed with skewX in opposite directions so the pair angles inward and appears to converge toward the center.
- Each beam must have a vertical mask-image gradient (transparent at the bottom fading to opaque at the top) so the light appears to dissipate as it falls rather than ending in a hard edge, plus a small blur filter to soften its edges into a glow. Mirror one beam horizontally so the pair is symmetric.
- A thin horizontal line element where the beams converge, using a gradient that is transparent at both ends and bright in the middle with a glowing box-shadow, animated from zero width to full width on page load so it looks like the lamp switching on.
- A separate heavily blurred, low-opacity ellipse behind the line that fades in and rises slightly on load, forming a soft pool of light beneath the beams.
- The headline and supporting content must fade up into view on a short delay after the light animations begin, not simultaneously with them, so the light visibly arrives first and the text appears to rise into the lit area.
- A single JavaScript function that re-themes the entire effect (both beam gradients, the line's gradient and shadow color, the glow ellipse's color, and the call-to-action button's background) from one accent color value, triggered by a double-click on the hero, to demonstrate that the whole effect is driven by a single themeable color.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSTwo light cones converge on a glowing line at the top center.
2
Watch it switch onThe line widens and a soft glow rises as the headline fades up into it.
3
Read the lit headlineThe title carries a top-down gradient sheen matching the lamp.
4
Double-click the heroThe whole lamp cycles to a new accent color.
5
Set your brand colorApply one accent to recolor cones, line, glow, and button.
6
Retime the entranceAdjust the widen and rise durations for more drama.

Real-world uses

Common Use Cases

Product launch heroes

Spotlight a headline above a shimmer button.

SaaS landing pages

Open a page that flows into a feature tabs showcase.

Event microsites

Pair with a scroll velocity marquee.

Portfolio intros

A dramatic alternative to a minimal hero.

Announcement pages

Light up a reveal over an animated grid background.

CSS lighting demos

A reference for conic-gradient spotlight beams.

Got questions?

Frequently Asked Questions

Each beam is an element filled with a conic-gradient fading from a bright color to transparent, skewed inward with skewX so the two cones angle toward the top center. A vertical mask-image fades each cone out at the bottom so the light dissipates, and a small blur softens the edges into a glow. The left cone is mirrored with scaleX(-1) for symmetry.

The horizontal line where the cones meet animates from zero width outward via the lhWiden keyframe, so the lamp appears to ignite and spread. Behind it a heavily blurred ellipse rises and fades in with lhRise, forming the soft pool of light the headline sits in. The content fades up on a short delay so the light reveals before the text arrives.

Yes — the cones, the reveal line, its glow halo, the soft pool, and the button all share one accent color. The demo's applyTheme function rewrites all of them at once, which shows the lamp is driven by a single value you could store in a CSS custom property and change with a theme switch.

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. Drive the accent color from a prop or CSS variable and set it on the cones, line, glow, and button so theming is one value. The entrance keyframes run on mount automatically; if you re-trigger them, toggle a key or class. Replace the double-click handler with your real theme control. In Tailwind, build the cones with bg-[conic-gradient(...)] and mask utilities.

Loading…