Modern Shadow Effects

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

1Long Shadow

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

Flat

<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" aria-hidden="true"></i></span><span class="display-6 fw-bold text-primary fx-long-shadow">Flat</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; }
}

2Fire Text

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

ON FIRE

<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">ON FIRE</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; }
}