Effects

Opacity and standalone outer/inset shadow presets for tone, depth, and surface hierarchy.

Overview

Effects utilities cover opacity and box shadow for tone and depth.

Opacity

The shipped opacity scale for muted, layered, and disabled states

Box Shadow

Outer and inset shadow utilities for elevated and recessed surfaces

What Lives In Effects

• bundled opacity utilities
• shipped outer box-shadow utilities
• shipped inset box-shadow utilities

Common Use Cases

• Surface layering: tone down panels without changing the color token
• Disabled previews: show non-primary states in mockups
• Depth cues: build subtle contrast between stacked blocks
• Recessed controls: create wells, trays, and pressed input-like surfaces
• Content hierarchy: soften secondary text or supporting panels

Accessibility

Accessibility Note: Ensure sufficient contrast when using opacity. Text with low opacity may not meet accessibility standards.

Opacity Guidelines

• Text: Avoid opacity below 75% for readable text
• Interactive elements: Use opacity to indicate disabled states
• Overlays: Use opacity to create depth without hiding content completely
• Focus states: Ensure focus indicators remain visible with opacity

Use the separate Filters section when you need blur, contrast, hue shifts, or color-effect utilities on media.