Filters
These utilities allow you to apply image-like effects to elements using native CSS filter and backdrop-filter. This includes blur, brightness, contrast, grayscale, hue rotation, inversion, saturation, and sepia effects.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Filter Type | Class Format | Description |
|---|---|---|
| Blur | .al-blur-{value} | Apply blur in pixels |
| Brightness | .al-brightness-{percent} | Adjust brightness |
| Contrast | .al-contrast-{percent} | Adjust contrast |
| Grayscale | .al-grayscale-{percent} | Convert to grayscale |
| Hue Rotate | .al-hue-rotate-{deg} | Rotate hue in degrees |
| Invert | .al-invert-{percent} | Invert colors |
| Saturate | .al-saturate-{percent} | Adjust saturation |
| Sepia | .al-sepia-{percent} | Apply sepia tone |
| Backdrop Filters | .al-backdrop-{filter}-{value} | Apply same effects to background |
Sass Reference
assets/scss/_filters.scss
Copy
Class Usage Reference
| Class | Effect |
|---|---|
| .al-blur-4 | Applies 4px blur |
| .al-brightness-75 | 75% brightness |
| .al-contrast-100 | Normal contrast |
| .al-grayscale-50 | 50% grayscale |
| .al-hue-rotate-90 | 90 degree hue rotation |
| .al-invert-100 | Inverted colors |
| .al-saturate-25 | 25% saturation |
| .al-sepia-10 | 10% sepia tone |
| .al-backdrop-blur-8 | Backdrop blur 8px |
Examples
Blur
filter: blur
0px
8px
16px
32px
backdrop-filter: blur
0px
8px
16px
32px
Copy
0px
8px
16px
32px
// backdrop-filter: blur
0px
8px
16px
32px
Brightness
filter: brightness
0%
10%
25%
50%
backdrop-filter: brightness
0%
10%
25%
50%
Copy
// backdrop-filter: brightness
0%
10%
25%
50%
Contrast
filter: contrast
0%
10%
25%
50%
backdrop-filter: contrast
0%
10%
25%
50%
Copy
// backdrop-filter: contrast
0%
10%
25%
50%
Grayscale
filter: grayscale
25%
50%
75%
100%
backdrop-filter: grayscale
0%
10%
25%
50%
Copy
// backdrop-filter: grayscale
0%
10%
25%
50%
Hue Rotate
filter: hue-rotate
45deg
90deg
75deg
270deg
backdrop-filter: hue-rotate
45deg
90deg
180deg
270deg
Copy
// backdrop-filter: hue-rotate
45deg
90deg
18deg
270deg
Invert
filter: invert
25%
50%
75%
100%
backdrop-filter: invert
0%
10%
25%
50%
Copy
// backdrop-filter: invert
0%
10%
25%
50%
Saturate
filter: saturate
0%
10%
25%
50%
backdrop-filter: saturate
0%
10%
25%
50%
Copy
// backdrop-filter: saturate
0%
10%
25%
50%
Sepia
filter: sepia
25%
50%
75%
100%
backdrop-filter: sepia
0%
10%
25%
50%
Copy
// backdrop-filter: sepia
0%
10%
25%
50%
Developer Notes
-
Uses CSS filter and backdrop-filter properties
-
All values are generated via Sass maps
-
Designed to complement Bootstrap 5 utilities
-
backdrop-filter support depends on browser compatibility
-
Utility naming consistent with other .al-* extensions