Modern Shadow Effects

Box and text shadows from neumorphism and glass to neon, fire and retro lettering.

1Neon Glow

A pulsing neon outline glow for cards, buttons and inputs, best on dark sections. Class: fx-shadow-neon-glow

Instant notifications

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="bg-dark rounded-4 p-4 d-flex flex-wrap gap-3 justify-content-center w-100" style="max-width:19rem">
    <div class="fx-shadow-neon-glow rounded-3 p-3 text-white text-center" style="width:8rem">
      <div class="fs-3" style="color:var(--wt-primary-ink)">
        <i class="bi bi-cpu-fill" aria-hidden="true"></i>
      </div>
      <div class="small">
        Instant notifications
      </div>
    </div>
    <button type="button" class="btn text-white rounded-pill align-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; }
}

2Fire Text

Flickering flame-coloured shadows rise from the letters of a heading. Class: fx-fire-text

BLAZE

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="bg-dark rounded-4 px-4 pt-5 pb-4 text-center w-100" style="max-width:19rem">
    <h2 class="display-5 fw-bold mb-0 fx-fire-text">BLAZE</h2>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-fire-text {
  color: #fff4d6;
  text-shadow: 0 0 4px #fff3c4, 0 -4px 6px #ffd23f, 0 -10px 14px #ff9f1c, 0 -18px 24px #ff5a1f, 0 -26px 36px #c81d25;
  animation: fx-fire-text-burn 1.2s ease-in-out infinite alternate;
}
@keyframes fx-fire-text-burn {
  to { text-shadow: 0 0 4px #fff3c4, 2px -6px 8px #ffd23f, -2px -12px 16px #ff9f1c, 2px -20px 26px #ff5a1f, -2px -30px 40px #c81d25; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-fire-text, .fx-fire-text::before, .fx-fire-text::after, .fx-fire-text *, .fx-fire-text *::before, .fx-fire-text *::after { animation: none !important; transition: none !important; }
}

3Soft Glow

A gentle breathing halo in the primary colour that makes a card or avatar feel highlighted. Class: fx-soft-glow

Recommended

Corporate cards

<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">
        Corporate cards
      </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; }
}