Modern Shadow Effects
Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Neumorphism
Soft extruded surfaces that match the page background; they press in on hover and adapt to dark mode. Class: fx-neumorphism
41°
Auckland
<div class="flex flex-wrap items-center justify-center gap-6 p-6 h-full" style="min-height:200px;background:var(--wt-bg)">
<button type="button" class="fx-neumorphism rounded-full text-primary text-2xl" style="width:72px;height:72px" aria-label="Play"><i class="bi bi-play-fill" aria-hidden="true"></i></button>
<div class="fx-neumorphism rounded-xl p-4 text-center" style="width:9rem">
<div class="text-xl font-bold">
41°
</div>
<div class="small text-muted">
Auckland
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-neumorphism {
--fx-neu-bg: var(--wt-bg, #e9edf2);
background: var(--fx-neu-bg); border: 0;
--fx-neu-dark: rgba(0, 0, 0, .14); --fx-neu-light: rgba(255, 255, 255, .75);
box-shadow: 8px 8px 18px var(--fx-neu-dark), -8px -8px 18px var(--fx-neu-light);
transition: box-shadow .35s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.fx-neumorphism {
--fx-neu-dark: color-mix(in srgb, var(--fx-neu-bg) 78%, #000);
--fx-neu-light: color-mix(in srgb, var(--fx-neu-bg) 70%, #fff);
}
}
.fx-neumorphism:hover, .fx-neumorphism:focus-visible, .fx-neumorphism:active { box-shadow: inset 6px 6px 12px var(--fx-neu-dark), inset -6px -6px 12px var(--fx-neu-light); }
@media (prefers-reduced-motion: reduce) {
.fx-neumorphism, .fx-neumorphism::before, .fx-neumorphism::after, .fx-neumorphism *, .fx-neumorphism *::before, .fx-neumorphism *::after { animation: none !important; transition: none !important; }
}2Neon Glow
A pulsing neon outline glow for cards, buttons and inputs, best on dark sections. Class: fx-shadow-neon-glow
Weekly demos
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="bg-dark rounded-xl p-6 flex flex-wrap gap-4 justify-center w-full" style="max-width:19rem">
<div class="fx-shadow-neon-glow rounded-lg p-4 text-white text-center" style="width:8rem">
<div class="text-2xl" style="color:var(--wt-primary)">
<i class="bi bi-cpu-fill" aria-hidden="true"></i>
</div>
<div class="small">
Weekly demos
</div>
</div>
<button type="button" class="btn text-white rounded-full self-center fx-shadow-neon-glow">Connect</button>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-shadow-neon-glow {
border: 1px solid rgba(var(--wt-primary-rgb), .8);
box-shadow: 0 0 8px rgba(var(--wt-primary-rgb), .6), 0 0 24px rgba(var(--wt-primary-rgb), .35), inset 0 0 12px rgba(var(--wt-primary-rgb), .25);
animation: fx-shadow-neon-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes fx-shadow-neon-glow-pulse {
50% { box-shadow: 0 0 14px rgba(var(--wt-primary-rgb), .8), 0 0 42px rgba(var(--wt-primary-rgb), .5), inset 0 0 18px rgba(var(--wt-primary-rgb), .35); }
}
@media (prefers-reduced-motion: reduce) {
.fx-shadow-neon-glow, .fx-shadow-neon-glow::before, .fx-shadow-neon-glow::after, .fx-shadow-neon-glow *, .fx-shadow-neon-glow *::before, .fx-shadow-neon-glow *::after { animation: none !important; transition: none !important; }
}3Layered Shadows
Five stacked, increasingly soft shadows give cards a realistic elevation that deepens on hover. Class: fx-layered-shadows
Content strategy
A elegant update helps customers coming back without extra tools.
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="card border-0 fx-layered-shadows" style="width:13rem">
<div class="card-body">
<div class="text-primary text-xl mb-1">
<i class="bi bi-layers-fill" aria-hidden="true"></i>
</div>
<h3 class="h6 mb-1">Content strategy</h3>
<p class="small text-muted mb-0">A elegant update helps customers coming back without extra tools.</p>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-layered-shadows {
box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .06), 0 4px 4px rgba(0, 0, 0, .06), 0 8px 8px rgba(0, 0, 0, .06), 0 16px 16px rgba(0, 0, 0, .06);
transition: box-shadow .4s ease, transform .4s ease;
}
.fx-layered-shadows:hover, .fx-layered-shadows:focus-within {
transform: translateY(-4px);
box-shadow: 0 2px 2px rgba(0, 0, 0, .07), 0 4px 4px rgba(0, 0, 0, .07), 0 8px 8px rgba(0, 0, 0, .07), 0 16px 16px rgba(0, 0, 0, .07), 0 32px 32px rgba(0, 0, 0, .07);
}
@media (prefers-reduced-motion: reduce) {
.fx-layered-shadows, .fx-layered-shadows::before, .fx-layered-shadows::after, .fx-layered-shadows *, .fx-layered-shadows *::before, .fx-layered-shadows *::after { animation: none !important; transition: none !important; }
}