Modern Shadow Effects
Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Soft Glow
A gentle breathing halo in the primary colour that makes a card or avatar feel highlighted. Class: fx-soft-glow
Recommended
Ticketing
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<img src="../assets/img/avatar-10.svg" alt="Featured member" class="fx-soft-glow rounded-full" 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-muted">
Recommended
</div>
<div class="font-bold">
Ticketing
</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; }
}2Outline Glow
A glowing focus ring for inputs, buttons and cards that appears on hover and keyboard focus. Class: fx-outline-glow
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="w-full" style="max-width:17rem">
<label for="fx-outline-1269" class="form-label small">Email address</label>
<div class="flex gap-2">
<input type="email" class="form-control fx-outline-glow" id="fx-outline-1269" placeholder="you@example.com">
<button type="button" class="btn btn-primary fx-outline-glow"><i class="bi bi-send-fill" aria-hidden="true"></i><span class="sr-only">Subscribe</span></button>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-outline-glow { outline: 2px solid transparent; outline-offset: 2px; transition: box-shadow .3s ease, border-color .3s ease; }
.fx-outline-glow:hover, .fx-outline-glow:focus, .fx-outline-glow:focus-visible, .fx-outline-glow:focus-within {
border-color: var(--wt-primary);
box-shadow: 0 0 0 3px rgba(var(--wt-primary-rgb), .3), 0 0 18px rgba(var(--wt-primary-rgb), .45);
}
@media (prefers-reduced-motion: reduce) {
.fx-outline-glow, .fx-outline-glow::before, .fx-outline-glow::after, .fx-outline-glow *, .fx-outline-glow *::before, .fx-outline-glow *::after { animation: none !important; transition: none !important; }
}