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
$4,554.38
Diego OrtegaJan 13, 2027
<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">
$4,554.38
</div>
<div class="d-flex justify-content-between small">
<span>Diego Ortega</span><span>Jan 13, 2027</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; }
}2Colored Shadows
Tinted shadows in the primary colour (override with --fx-shadow-rgb) that make buttons and images glow softly. Class: fx-colored-shadows
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="btn btn-primary btn-lg fx-colored-shadows">Get started</button>
<img src="../assets/img/product-7.svg" alt="Product with an accent shadow" class="fx-colored-shadows rounded-4 object-fit-cover" style="width:110px;height:110px;--fx-shadow-rgb:var(--wt-accent-rgb)">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-colored-shadows {
box-shadow: 0 14px 28px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .65);
transition: box-shadow .35s ease, transform .35s ease;
}
.fx-colored-shadows:hover, .fx-colored-shadows:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 36px -12px rgba(var(--fx-shadow-rgb, var(--wt-primary-rgb)), .8); }
@media (prefers-reduced-motion: reduce) {
.fx-colored-shadows, .fx-colored-shadows::before, .fx-colored-shadows::after, .fx-colored-shadows *, .fx-colored-shadows *::before, .fx-colored-shadows *::after { animation: none !important; transition: none !important; }
}3Neon Text
Glowing neon-sign lettering with a subtle flicker; looks best on a dark background. Class: fx-neon-text
Open late
<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">Open late</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; }
}