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>
PreviousEffectsNextFlexbox

Last updated