Filters
SkyLineCSS - Filters Utility Classes
SkyLineCSS provides a set of utility classes for applying CSS filters to elements. Filters allow you to apply visual effects like blurring, adjusting brightness, contrast, drop shadows, grayscale, hue rotation, invert colors, saturation adjustment, and sepia tone.
Blur
Classes
.blur-none: No blur effect..blur-sm: Small blur effect (4px)..blur-md: Medium blur effect (8px)..blur-lg: Large blur effect (12px).
Usage
<div class="blur-sm">Small Blur</div>
<div class="blur-lg">Large Blur</div>Brightness
Classes
.brightness-0: No brightness adjustment..brightness-50: 50% brightness..brightness-75: 75% brightness..brightness-100: 100% brightness..brightness-125: 125% brightness.
Usage
Contrast
Classes
.contrast-0: No contrast adjustment..contrast-50: 50% contrast..contrast-75: 75% contrast..contrast-100: 100% contrast..contrast-125: 125% contrast.
Usage
Drop Shadow
Classes
.drop-shadow: Adds a drop shadow effect.
Usage
Grayscale
Classes
.grayscale-0: No grayscale effect..grayscale-50: 50% grayscale..grayscale-100: 100% grayscale.
Usage
Hue Rotate
Classes
.hue-rotate-0: No hue rotation..hue-rotate-90: 90 degrees hue rotation..hue-rotate-180: 180 degrees hue rotation..hue-rotate-270: 270 degrees hue rotation.
Usage
Invert
Classes
.invert-0: No color inversion..invert-50: 50% color inversion..invert-100: 100% color inversion.
Usage
Saturate
Classes
.saturate-0: No saturation adjustment..saturate-50: 50% saturation..saturate-100: 100% saturation..saturate-150: 150% saturation.
Usage
Sepia
Classes
.sepia-0: No sepia effect..sepia-50: 50% sepia..sepia-100: 100% sepia.
Usage
Last updated