Box and text shadows from neumorphism and glass to neon, fire and retro lettering.
1Neon Text
Glowing neon-sign lettering with a subtle flicker; looks best on a dark background. Class: fx-neon-text
Night mode
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="bg-dark rounded-xl px-6 py-12 text-center w-full" style="max-width:19rem">
<h2 class="display-6 font-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; }
}2Fire Text
Flickering flame-coloured shadows rise from the letters of a heading. Class: fx-fire-text
IGNITE
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="bg-dark rounded-xl px-6 pt-12 pb-6 text-center w-full" style="max-width:19rem">
<h2 class="display-5 font-bold mb-0 fx-fire-text">IGNITE</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; }
}3Outline Glow
A glowing focus ring for inputs, buttons and cards that appears on hover and keyboard focus. Class: fx-outline-glow
<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
<div class="w-full" style="max-width:17rem">
<label for="fx-outline-1269" class="form-label small">Email address</label>
<div class="flex gap-2">
<input type="email" class="form-control fx-outline-glow" id="fx-outline-1269" placeholder="you@example.com">
<button type="button" class="btn btn-primary fx-outline-glow"><i class="bi bi-send-fill" aria-hidden="true"></i><span class="sr-only">Subscribe</span></button>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-outline-glow { outline: 2px solid transparent; outline-offset: 2px; transition: box-shadow .3s ease, border-color .3s ease; }
.fx-outline-glow:hover, .fx-outline-glow:focus, .fx-outline-glow:focus-visible, .fx-outline-glow:focus-within {
border-color: var(--wt-primary);
box-shadow: 0 0 0 3px rgba(var(--wt-primary-rgb), .3), 0 0 18px rgba(var(--wt-primary-rgb), .45);
}
@media (prefers-reduced-motion: reduce) {
.fx-outline-glow, .fx-outline-glow::before, .fx-outline-glow::after, .fx-outline-glow *, .fx-outline-glow *::before, .fx-outline-glow *::after { animation: none !important; transition: none !important; }
}