surface panel gradient light card premium settings or pricing panels hero cards and promo surfaces dashboard cards that need a quieter surface accent surfaces look too flat with only border and shadow full glow or foil effects are too loud need a subtle lighting cue that fits Tailwind card stacks
Top Light Panel
Fetch snippet JSON:
curl https://webspire.de/snippets/surfaces/top-light-panel.json Surface
Top Light Panel
A softer top-edge lighting cue for quieter premium surfaces.
Background
Customize
Quick Start
<article class="top-light-panel relative rounded-3xl border border-white/10 bg-slate-950/80 p-6 text-white">...</article>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 344 bytes · 15 lines
- Custom Properties
-
--top-light-strength - Classes
-
.top-light-panel
surface panel gradient light card
A very quiet material accent for cards and panels. It makes the top edge catch more light, which helps flat surfaces feel more deliberate without pushing them into a strong “effect” look.