Modern Shadow Effects
Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Layered Shadows
Five stacked, increasingly soft shadows give cards a realistic elevation that deepens on hover. Class: fx-layered-shadows
Corporate cards
The new accounting sync makes data easy to understand all year round.
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="card border-0 fx-layered-shadows" style="width:13rem">
<div class="card-body">
<div class="text-primary fs-4 mb-1">
<i class="bi bi-layers-fill" aria-hidden="true"></i>
</div>
<h3 class="h6 mb-1">Corporate cards</h3>
<p class="small text-body-secondary mb-0">The new accounting sync makes data easy to understand all year round.</p>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-layered-shadows {
box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .06), 0 4px 4px rgba(0, 0, 0, .06), 0 8px 8px rgba(0, 0, 0, .06), 0 16px 16px rgba(0, 0, 0, .06);
transition: box-shadow .4s ease, transform .4s ease;
}
.fx-layered-shadows:hover, .fx-layered-shadows:focus-within {
transform: translateY(-4px);
box-shadow: 0 2px 2px rgba(0, 0, 0, .07), 0 4px 4px rgba(0, 0, 0, .07), 0 8px 8px rgba(0, 0, 0, .07), 0 16px 16px rgba(0, 0, 0, .07), 0 32px 32px rgba(0, 0, 0, .07);
}
@media (prefers-reduced-motion: reduce) {
.fx-layered-shadows, .fx-layered-shadows::before, .fx-layered-shadows::after, .fx-layered-shadows *, .fx-layered-shadows *::before, .fx-layered-shadows *::after { animation: none !important; transition: none !important; }
}2Neon Text
Glowing neon-sign lettering with a subtle flicker; looks best on a dark background. Class: fx-neon-text
Night mode
<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 py-5 text-center w-100" style="max-width:19rem">
<h2 class="display-6 fw-bold mb-0 fx-neon-text">Night mode</h2>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-neon-text {
color: #fff;
text-shadow: 0 0 4px #fff, 0 0 10px rgba(var(--wt-primary-rgb), 1), 0 0 22px rgba(var(--wt-primary-rgb), .9), 0 0 42px rgba(var(--wt-primary-rgb), .7);
animation: fx-neon-text-flicker 4s linear infinite;
}
@keyframes fx-neon-text-flicker {
0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
20%, 22%, 55% { opacity: .55; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
.fx-neon-text, .fx-neon-text::before, .fx-neon-text::after, .fx-neon-text *, .fx-neon-text *::before, .fx-neon-text *::after { animation: none !important; transition: none !important; }
}