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

Bank-grade encryption

<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">
        Bank-grade encryption
      </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; }
}

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="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <h2 class="display-6 fw-bold text-primary mb-0 fx-retro-style">Groovy</h2>
  <button type="button" class="btn btn-warning fw-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; }
}