Effect Utilities

Control shadows, filters, and visual effects.

Box Shadow

Add shadows to elements.

Available classes:

• sb-shadow-none: No shadow
• sb-shadow-sm: Small shadow
• sb-shadow: Default shadow
• sb-shadow-md: Medium shadow
• sb-shadow-lg: Large shadow
• sb-shadow-xl: Extra large shadow
• sb-shadow-inner: Inner shadow

Opacity

Control element transparency.

Available classes:

• sb-opacity-0: Invisible
• sb-opacity-10: 10% visible
• sb-opacity-25: 25% visible
• sb-opacity-40: 40% visible
• sb-opacity-50: 50% visible
• sb-opacity-60: 60% visible
• sb-opacity-75: 75% visible
• sb-opacity-80: 80% visible
• sb-opacity-90: 90% visible
• sb-opacity-100: Fully visible

Blur

Apply blur effects.

Available classes:

• sb-blur-none: No blur
• sb-blur-sm: Slight blur (2px)
• sb-blur: Default blur (4px)
• sb-blur-md: Medium blur (6px)
• sb-blur-lg: Large blur (8px)
• sb-blur-xl: Extra large blur (12px)

Brightness

Adjust element brightness.

Available classes:

• sb-brightness-0: Black
• sb-brightness-50: 50% brightness
• sb-brightness-75: 75% brightness
• sb-brightness-100: Normal
• sb-brightness-125: 125% brightness
• sb-brightness-150: 150% brightness

Contrast

Adjust element contrast.

Available classes:

• sb-contrast-0: No contrast
• sb-contrast-50: 50% contrast
• sb-contrast-75: 75% contrast
• sb-contrast-100: Normal
• sb-contrast-125: 125% contrast
• sb-contrast-150: 150% contrast

Continue to Flexbox and Grid Utilities