🌫️ Blur Filters
CSS blur filter effects at various intensities
Original
No filter applied
blur-sm (2px)
.filter--blur-sm
blur (4px)
.filter--blur
blur-md (8px)
.filter--blur-md
blur-lg (16px)
.filter--blur-lg
blur-xl (24px)
.filter--blur-xl
⬛ Grayscale Filters
Convert images to grayscale at different intensities
Original
No filter applied
grayscale-0
.filter--grayscale-0
grayscale-50
.filter--grayscale-50
grayscale (100%)
.filter--grayscale
🟫 Sepia Filters
Vintage sepia tone effects
Original
No filter applied
sepia-50
.filter--sepia-50
sepia (100%)
.filter--sepia
☀️ Brightness Filters
Adjust image brightness levels
Original
No filter applied
brightness-50
.filter--brightness-50
brightness-75
.filter--brightness-75
brightness-100
.filter--brightness-100
brightness-125
.filter--brightness-125
brightness-150
.filter--brightness-150
🔲 Contrast Filters
Adjust image contrast levels
Original
No filter applied
contrast-50
.filter--contrast-50
contrast-100
.filter--contrast-100
contrast-150
.filter--contrast-150
contrast-200
.filter--contrast-200
🎨 Saturate Filters
Adjust color saturation levels
Original
No filter applied
saturate-0
.filter--saturate-0
saturate-50
.filter--saturate-50
saturate-150
.filter--saturate-150
saturate-200
.filter--saturate-200
🌈 Hue Rotate Filters
Rotate the hue of colors
Original
No filter applied
hue-rotate-30°
.filter--hue-rotate-30
hue-rotate-60°
.filter--hue-rotate-60
hue-rotate-90°
.filter--hue-rotate-90
hue-rotate-180°
.filter--hue-rotate-180
hue-rotate-270°
.filter--hue-rotate-270
🔄 Invert Filters
Invert image colors
Original
No filter applied
invert-0
.filter--invert-0
invert-50
.filter--invert-50
invert (100%)
.filter--invert
🌑 Drop Shadow Filters
CSS filter drop-shadow effects
Original
No filter applied
drop-shadow-sm
.filter--drop-shadow-sm
drop-shadow
.filter--drop-shadow
drop-shadow-md
.filter--drop-shadow-md
drop-shadow-lg
.filter--drop-shadow-lg
drop-shadow-xl
.filter--drop-shadow-xl
🎭 Filter Presets
Pre-configured filter combinations for creative effects
Original
No filter applied
Noir
.filter--noir
Vintage
.filter--vintage
Cold
.filter--cold
Warm
.filter--warm
🌫️ Backdrop Filters
CSS backdrop-filter effects for glass morphism
Blur
backdrop--blur
.backdrop--blur
Blur SM
backdrop--blur-sm
.backdrop--blur-sm
Blur LG
backdrop--blur-lg
.backdrop--blur-lg
Glass
backdrop--glass
.backdrop--glass
Glass Dark
backdrop--glass-dark
.backdrop--glass-dark
Grayscale
backdrop--grayscale
.backdrop--grayscale
Sepia
backdrop--sepia
.backdrop--sepia
Invert
backdrop--invert
.backdrop--invert
🌑 Box Shadows
Box shadow utilities for depth and elevation
Default
shadow
.shadow
Small
shadow--sm
.shadow--sm
Medium
shadow--md
.shadow--md
Large
shadow--lg
.shadow--lg
X-Large
shadow--xl
.shadow--xl
Inner
shadow--inner
.shadow--inner
Glow
shadow--glow
.shadow--glow
Glow LG
shadow--glow-lg
.shadow--glow-lg
Primary
shadow--primary
.shadow--primary
Success
shadow--success
.shadow--success
Warning
shadow--warning
.shadow--warning
Danger
shadow--danger
.shadow--danger
🎭 Blend Modes
CSS mix-blend-mode effects for creative layering
Multiply
blend--multiply
.blend--multiply
Screen
blend--screen
.blend--screen
blend--overlay
.blend--overlay
Darken
blend--darken
.blend--darken
Lighten
blend--lighten
.blend--lighten
Difference
blend--difference
.blend--difference
Exclusion
blend--exclusion
.blend--exclusion
Hue
blend--hue
.blend--hue
🎭 Masks
CSS mask effects for fade gradients
mask--fade-t
.mask--fade-t
mask--fade-b
.mask--fade-b
mask--fade-l
.mask--fade-l
mask--fade-r
.mask--fade-r
mask--radial
.mask--radial
📖 Usage
How to use filter classes and mixins
// Using filter classes directly in HTML
<img class="filter--blur" src="photo.jpg">
<img class="filter--grayscale" src="photo.jpg">
<img class="filter--sepia filter--brightness-110" src="photo.jpg">
// Using mixins in SCSS
.my-image {
@include filter_blur(8px);
}
.vintage-photo {
@include filter_sepia(80%);
@include filter_brightness(1.1);
}
// Backdrop filters for glass effects
.glass-card {
@include backdrop_blur(12px);
background: rgba(255, 255, 255, 0.2);
}