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
<div class="brightness-50">50% Brightness</div>
<div class="brightness-125">125% Brightness</div>Contrast
Classes
.contrast-0: No contrast adjustment..contrast-50: 50% contrast..contrast-75: 75% contrast..contrast-100: 100% contrast..contrast-125: 125% contrast.
Usage
<div class="contrast-50">50% Contrast</div>
<div class="contrast-125">125% Contrast</div>Drop Shadow
Classes
.drop-shadow: Adds a drop shadow effect.
Usage
<div class="drop-shadow">Drop Shadow</div>Grayscale
Classes
.grayscale-0: No grayscale effect..grayscale-50: 50% grayscale..grayscale-100: 100% grayscale.
Usage
<div class="grayscale-50">50% Grayscale</div>
<div class="grayscale-100">100% Grayscale</div>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
<div class="hue-rotate-90">90° Hue Rotation</div>
<div class="hue-rotate-270">270° Hue Rotation</div>Invert
Classes
.invert-0: No color inversion..invert-50: 50% color inversion..invert-100: 100% color inversion.
Usage
<div class="invert-50">50% Invert</div>
<div class="invert-100">100% Invert</div>Saturate
Classes
.saturate-0: No saturation adjustment..saturate-50: 50% saturation..saturate-100: 100% saturation..saturate-150: 150% saturation.
Usage
<div class="saturate-50">50% Saturation</div>
<div class="saturate-150">150% Saturation</div>Sepia
Classes
.sepia-0: No sepia effect..sepia-50: 50% sepia..sepia-100: 100% sepia.
Usage
<div class="sepia-50">50% Sepia</div>
<div class="sepia-100">100% Sepia</div>Last updated