Visual depth shouldn't be an afterthought buried in CSS declarations. This lab separates dimensional effects — elevation shadows, radial glows, directional gradients, and noise grain — into first-class tokens that can be tuned systematically across dark and light themes.
Preview
Elevation scale
Layered multi-stop box shadows (sm to xl). In dark mode, shadows pair deep occlusions with a subtle top-edge light reflection; in light mode, they render as soft ambient diffusion.
Glow
A radial-gradient overlay, top-right by convention (fixed position — same idea as the mark's fixed corner logic, not a per-instance control).
The glow reads as light, not paint — held to a low ceiling so it stays elegant rather than neon.
Gradients
Accent → transparent, sized for its real job (a data/area fill or a small luminous edge — not a full panel), and a subtle surface wash that's dark-mode only: on an already-white light surface, white-to-transparent has nowhere to go, so light renders as a plain card.
Grain
Fine self-contained noise (inline SVG feTurbulence) — turns flat dark into material, and quietly prevents banding on the gradient wash underneath. Dark-primary, near-off in light by default (same asymmetry as glow). Compare against a plain card, same shadow, same gradient.
Global shadow intensity dial scaling contrast and depth across all elevation tiers simultaneously.
Computed (current theme)
Tuning for radial ambient glow emissions. Sets layer opacity and radial falloff distance independently per theme.
Resolved
85% 0%) to create consistent directional lighting across raised panels. Source hue is selected in the Color Lab.Directional accent gradient angle and softness for luminous edge treatments and chart fills. gradient-surface provides a subtle top-to-bottom depth wash on dark panels.
Algorithmic SVG fractal noise (feTurbulence) that introduces tactile surface material to flat backgrounds and prevents color banding on subtle gradients.
Blend mode