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
83°
Porto
<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">
83°
</div>
<div class="small text-body-secondary">
Porto
</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; }
}23D Text Shadow
Stacks hard shadows under a heading so the letters look extruded, with a soft ambient shadow below. Class: fx-3d-text-shadow
Stack
<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-4 fw-bold mb-0 fx-3d-text-shadow">Stack</h2>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-3d-text-shadow {
color: var(--wt-primary-ink);
--fx-depth: rgba(0, 0, 0, .35);
text-shadow: 0 1px 0 var(--fx-depth), 0 2px 0 var(--fx-depth), 0 3px 0 var(--fx-depth), 0 4px 0 var(--fx-depth), 0 5px 0 var(--fx-depth), 0 6px 0 var(--fx-depth),
0 8px 6px rgba(0, 0, 0, .2), 0 14px 18px rgba(0, 0, 0, .18);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.fx-3d-text-shadow { --fx-depth: color-mix(in srgb, var(--wt-primary) 60%, #000); }
}
@media (prefers-reduced-motion: reduce) {
.fx-3d-text-shadow, .fx-3d-text-shadow::before, .fx-3d-text-shadow::after, .fx-3d-text-shadow *, .fx-3d-text-shadow *::before, .fx-3d-text-shadow *::after { animation: none !important; transition: none !important; }
}3Fire Text
Flickering flame-coloured shadows rise from the letters of a heading. Class: fx-fire-text
HOT DEAL
<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">HOT DEAL</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; }
}