Modern CSS Filter Effects
Grayscale, blur, hue, sepia, duotone and glow filters for photos, logos, icons and text.
1Glitch Filter
Short bursts of hue, contrast and position jumps make an image look like a corrupted signal. Class: fx-glitch-filter
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1560439514-0fc9d2cd5e1b?auto=format&fit=crop&w=1200&h=800&q=70" alt="Photo with a glitch filter" class="fx-glitch-filter object-fit-cover rounded-3" style="width:200px;height:140px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-glitch-filter { animation: fx-glitch-filter-glitch 3.5s steps(1) infinite; }
@keyframes fx-glitch-filter-glitch {
0%, 86%, 100% { filter: none; transform: none; }
88% { filter: hue-rotate(90deg) saturate(3) contrast(1.6); transform: translate(-4px, 1px); }
90% { filter: invert(.15) contrast(2); transform: translate(4px, -2px) skewX(6deg); }
92% { filter: hue-rotate(-70deg) saturate(2); transform: translate(-2px, 0); }
94% { filter: brightness(1.6); transform: translate(2px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
.fx-glitch-filter, .fx-glitch-filter::before, .fx-glitch-filter::after, .fx-glitch-filter *, .fx-glitch-filter *::before, .fx-glitch-filter *::after { animation: none !important; transition: none !important; }
}2Saturation Boost
Desaturated at rest, vivid on hover - draws attention to the product the visitor is looking at. Class: fx-saturation-boost
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="../assets/img/product-5.svg" alt="Product with boosted colour" class="fx-saturation-boost rounded-3 object-fit-cover" style="width:120px;height:120px"><img src="../assets/img/product-6.svg" alt="Second product" class="fx-saturation-boost rounded-3 object-fit-cover" style="width:120px;height:120px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-saturation-boost { filter: saturate(.6); transition: filter .4s ease, transform .4s ease; }
.fx-saturation-boost:hover, .fx-saturation-boost:focus-visible { filter: saturate(1.8); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.fx-saturation-boost, .fx-saturation-boost::before, .fx-saturation-boost::after, .fx-saturation-boost *, .fx-saturation-boost *::before, .fx-saturation-boost *::after { animation: none !important; transition: none !important; }
}