Modern Shadow Effects

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

1Neumorphism

Soft extruded surfaces that match the page background; they press in on hover and adapt to dark mode. Class: fx-neumorphism

53°

Lisbon

<div class="d-flex flex-wrap align-items-center justify-content-center gap-4 p-4 h-100" style="min-height:200px;background:var(--wt-bg)">
  <button type="button" class="fx-neumorphism rounded-circle text-primary fs-3" style="width:72px;height:72px" aria-label="Play"><i class="bi bi-play-fill" aria-hidden="true"></i></button>
  <div class="fx-neumorphism rounded-4 p-3 text-center" style="width:9rem">
    <div class="fs-4 fw-bold">
      53&deg;
    </div>
    <div class="small text-body-secondary">
      Lisbon
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-neumorphism {
  --fx-neu-bg: var(--wt-bg, #e9edf2);
  background: var(--fx-neu-bg); border: 0;
  --fx-neu-dark: rgba(0, 0, 0, .14); --fx-neu-light: rgba(255, 255, 255, .75);
  box-shadow: 8px 8px 18px var(--fx-neu-dark), -8px -8px 18px var(--fx-neu-light);
  transition: box-shadow .35s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fx-neumorphism {
    --fx-neu-dark: color-mix(in srgb, var(--fx-neu-bg) 78%, #000);
    --fx-neu-light: color-mix(in srgb, var(--fx-neu-bg) 70%, #fff);
  }
}
.fx-neumorphism:hover, .fx-neumorphism:focus-visible, .fx-neumorphism:active { box-shadow: inset 6px 6px 12px var(--fx-neu-dark), inset -6px -6px 12px var(--fx-neu-light); }
@media (prefers-reduced-motion: reduce) {
  .fx-neumorphism, .fx-neumorphism::before, .fx-neumorphism::after, .fx-neumorphism *, .fx-neumorphism *::before, .fx-neumorphism *::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

Health check-ups

<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">
        Health check-ups
      </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; }
}