Effects

SkyLineCSS - Effects Utility Classes

SkyLineCSS provides a set of utility classes for adding effects to elements. These classes allow you to easily apply box shadows, opacity, mix blend modes, and background blend modes to enhance the visual appearance of your elements.

Box Shadow

Classes

• .shadow-sm: Small box shadow.

• .shadow-md: Medium box shadow.

• .shadow-lg: Large box shadow.

Usage

<div class="shadow-md">Medium Shadow</div>
<div class="shadow-lg">Large Shadow</div>

Box Shadow Color

Classes

• .shadow-black: Black box shadow.

• .shadow-white: White box shadow.

• .shadow-gray: Gray box shadow.

Usage

<div class="shadow-black">Black Shadow</div>
<div class="shadow-gray">Gray Shadow</div>

Opacity

Classes

• .opacity-0: Transparent (0% opacity).

• .opacity-25: 25% opacity.

• .opacity-50: 50% opacity.

• .opacity-75: 75% opacity.

• .opacity-100: 100% opacity (fully opaque).

Usage

<div class="opacity-50">50% Opacity</div>
<div class="opacity-25">25% Opacity</div>

Mix Blend Mode

Classes

• .blend-normal: Normal blend mode.

• .blend-multiply: Multiply blend mode.

• .blend-screen: Screen blend mode.

• .blend-overlay: Overlay blend mode.

• .blend-darken: Darken blend mode.

• .blend-lighten: Lighten blend mode.

• .blend-color-dodge: Color dodge blend mode.

• .blend-color-burn: Color burn blend mode.

• .blend-hard-light: Hard light blend mode.

• .blend-soft-light: Soft light blend mode.

• .blend-difference: Difference blend mode.

• .blend-exclusion: Exclusion blend mode.

• .blend-hue: Hue blend mode.

• .blend-saturation: Saturation blend mode.

• .blend-color: Color blend mode.

• .blend-luminosity: Luminosity blend mode.

Usage

<div class="blend-overlay">Overlay Blend Mode</div>
<div class="blend-color-dodge">Color Dodge Blend Mode</div>

Background Blend Mode

Classes

• .bg-blend-normal: Normal background blend mode.

• .bg-blend-multiply: Multiply background blend mode.

• .bg-blend-screen: Screen background blend mode.

• .bg-blend-overlay: Overlay background blend mode.

• .bg-blend-darken: Darken background blend mode.

• .bg-blend-lighten: Lighten background blend mode.

• .bg-blend-color-dodge: Color dodge background blend mode.

• .bg-blend-color-burn: Color burn background blend mode.

• .bg-blend-hard-light: Hard light background blend mode.

• .bg-blend-soft-light: Soft light background blend mode.

• .bg-blend-difference: Difference background blend mode.

• .bg-blend-exclusion: Exclusion background blend mode.

• .bg-blend-hue: Hue background blend mode.

• .bg-blend-saturation: Saturation background blend mode.

• .bg-blend-color: Color background blend mode.

• .bg-blend-luminosity: Luminosity background blend mode.

Usage

<div class="bg-blend-overlay">Overlay Background Blend Mode</div>
<div class="bg-blend-color-dodge">Color Dodge Background Blend Mode</div>