Modern Shadow Effects
Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Colored Shadows
Tinted shadows in the primary colour (override with --fx-shadow-rgb) that make buttons and images glow softly. Class: fx-colored-shadows
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="btn btn-primary btn-lg fx-colored-shadows">Book now</button>
<img src="../assets/img/product-7.svg" alt="Product with an accent shadow" class="fx-colored-shadows rounded-4 object-fit-cover" style="width:110px;height:110px;--fx-shadow-rgb:var(--wt-accent-rgb)">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-colored-shadows {
box-shadow: 0 14px 28px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .65);
transition: box-shadow .35s ease, transform .35s ease;
}
.fx-colored-shadows:hover, .fx-colored-shadows:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .8); }
@media (prefers-reduced-motion: reduce) {
.fx-colored-shadows, .fx-colored-shadows::before, .fx-colored-shadows::after, .fx-colored-shadows *, .fx-colored-shadows *::before, .fx-colored-shadows *::after { animation: none !important; transition: none !important; }
}2Soft Glow
A gentle breathing halo in the primary colour that makes a card or avatar feel highlighted. Class: fx-soft-glow
Recommended
Recovery spa
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="../assets/img/avatar-10.svg" alt="Featured member" class="fx-soft-glow rounded-circle" style="width:80px;height:80px">
<div class="card border-0 fx-soft-glow" style="width:11rem">
<div class="card-body text-center">
<div class="small text-body-secondary">
Recommended
</div>
<div class="fw-bold">
Recovery spa
</div>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-soft-glow { box-shadow: 0 0 24px rgba(var(--wt-primary-rgb), .22); animation: fx-soft-glow-breathe 4s ease-in-out infinite; }
@keyframes fx-soft-glow-breathe { 50% { box-shadow: 0 0 44px rgba(var(--wt-primary-rgb), .42); } }
@media (prefers-reduced-motion: reduce) {
.fx-soft-glow, .fx-soft-glow::before, .fx-soft-glow::after, .fx-soft-glow *, .fx-soft-glow *::before, .fx-soft-glow *::after { animation: none !important; transition: none !important; }
}