Modern Shadow Effects

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

1Glassmorphism

A frosted translucent panel with an inner highlight and soft drop shadow for overlays on images or gradients. Class: fx-glassmorphism

Balance

$3,690.75

Mason CarterNov 17, 2026

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100 rounded-4" style="min-height:200px;background:radial-gradient(circle at 20% 25%, var(--wt-accent) 0 18%, transparent 19%),radial-gradient(circle at 82% 75%, var(--wt-secondary) 0 22%, transparent 23%),linear-gradient(135deg, var(--wt-primary), var(--wt-secondary))">
  <div class="fx-glassmorphism rounded-4 p-3" style="width:14rem">
    <div class="small opacity-75">
      Balance
    </div>
    <div class="fs-4 fw-bold mb-2">
      $3,690.75
    </div>
    <div class="d-flex justify-content-between small">
      <span>Mason Carter</span><span>Nov 17, 2026</span>
    </div>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-glassmorphism {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-glassmorphism { background: rgba(var(--wt-primary-rgb), .85); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glassmorphism, .fx-glassmorphism::before, .fx-glassmorphism::after, .fx-glassmorphism *, .fx-glassmorphism *::before, .fx-glassmorphism *::after { animation: none !important; transition: none !important; }
}

2Neon Glow

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

Sustainable materials

<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)">
        <i class="bi bi-cpu-fill" aria-hidden="true"></i>
      </div>
      <div class="small">
        Sustainable materials
      </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; }
}

3Long Shadow

A flat-design long diagonal shadow for headings and icon glyphs; set --fx-long to change its colour. Class: fx-long-shadow

Wow

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <div class="rounded-4 px-4 py-3 d-flex align-items-center gap-3 overflow-hidden" style="background:var(--wt-bg)">
    <span class="display-5 text-primary fx-long-shadow"><i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i></span><span class="display-6 fw-bold text-primary fx-long-shadow">Wow</span>
  </div>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-long-shadow { --fx-long: rgba(var(--wt-primary-rgb), .12); text-shadow: 1px 1px 0 var(--fx-long), 2px 2px 0 var(--fx-long), 3px 3px 0 var(--fx-long), 4px 4px 0 var(--fx-long), 5px 5px 0 var(--fx-long), 6px 6px 0 var(--fx-long), 7px 7px 0 var(--fx-long), 8px 8px 0 var(--fx-long), 9px 9px 0 var(--fx-long), 10px 10px 0 var(--fx-long), 11px 11px 0 var(--fx-long), 12px 12px 0 var(--fx-long), 13px 13px 0 var(--fx-long), 14px 14px 0 var(--fx-long), 15px 15px 0 var(--fx-long), 16px 16px 0 var(--fx-long), 17px 17px 0 var(--fx-long), 18px 18px 0 var(--fx-long), 19px 19px 0 var(--fx-long), 20px 20px 0 var(--fx-long), 21px 21px 0 var(--fx-long), 22px 22px 0 var(--fx-long), 23px 23px 0 var(--fx-long), 24px 24px 0 var(--fx-long), 25px 25px 0 var(--fx-long), 26px 26px 0 var(--fx-long), 27px 27px 0 var(--fx-long), 28px 28px 0 var(--fx-long), 29px 29px 0 var(--fx-long), 30px 30px 0 var(--fx-long); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .fx-long-shadow { --fx-long: color-mix(in srgb, var(--wt-primary) 22%, var(--wt-bg, #fff)); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-long-shadow, .fx-long-shadow::before, .fx-long-shadow::after, .fx-long-shadow *, .fx-long-shadow *::before, .fx-long-shadow *::after { animation: none !important; transition: none !important; }
}