Shadows & Glows
Elevation shadows for light mode, green-tinted glows for dark mode. Hover to preview alternate style.
Shadows & Glows
Elevation shadows for light mode, with green-tinted glow variants for dark mode. Use the semantic tokens which auto-switch.
shadow subtle
--g-shadow-subtle 0 1px 2px rgba(0, 0, 0, 0.08)
Subtle shadow for cards (light mode)
shadow float
--g-shadow-float 0 6px 20px rgba(0, 0, 0, 0.18)
Float shadow for dropdowns/modals (light mode)
glow subtle
--g-glow-subtle 0 0 8px oklch(0.5 0.08 180 / 0.3)
Subtle green glow (dark mode)
glow float
--g-glow-float 0 0 20px oklch(0.5 0.1 180 / 0.4)
Strong green glow for modals (dark mode)
Theme Switching
Light Mode Default
Shadow
Uses --g-shadow-* tokens for classic drop shadow elevation
Dark Mode Default
Glow
Uses --g-glow-* tokens for green-tinted luminous effect
Implementation Tip: Use the semantic
--g-elevation-* tokens which
automatically switch between shadow and glow based on theme.Usage Guidelines
Subtle Elevation
- Cards in lists
- Form inputs (optional)
- Slight content separation
Float Elevation
- Dropdown menus
- Modal dialogs
- Popover content
- Tooltip boxes