Modern Shadow Effects
Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Layered Shadows
Five stacked, increasingly soft shadows give cards a realistic elevation that deepens on hover. Class: fx-layered-shadows
Web design
We listen first, then build a plan around what you actually need.
<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-ink text-xl mb-1">
<i class="bi bi-layers-fill" aria-hidden="true"></i>
</div>
<h3 class="h6 mb-1">Web design</h3>
<p class="small text-muted mb-0">We listen first, then build a plan around what you actually need.</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; }
}2Retro Style
Hard offset shadows in two theme colours for a retro poster look; on .card or .btn it becomes a bold offset box. Class: fx-retro-style
Groovy
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<h2 class="display-6 font-bold text-primary-ink mb-0 fx-retro-style">Groovy</h2>
<button type="button" class="btn btn-warning font-bold fx-retro-style">Press start</button>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-retro-style { text-shadow: 3px 3px 0 var(--wt-accent), 6px 6px 0 var(--wt-secondary); }
.fx-retro-style.card, .fx-retro-style.btn {
text-shadow: none; border: 2px solid var(--wt-text, #212529);
box-shadow: 6px 6px 0 var(--wt-text, #212529);
transition: transform .2s ease, box-shadow .2s ease;
}
.fx-retro-style.card:hover, .fx-retro-style.btn:hover, .fx-retro-style.btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--wt-text, #212529); }
.fx-retro-style.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--wt-text, #212529); }
@media (prefers-reduced-motion: reduce) {
.fx-retro-style, .fx-retro-style::before, .fx-retro-style::after, .fx-retro-style *, .fx-retro-style *::before, .fx-retro-style *::after { animation: none !important; transition: none !important; }
}