Skip to main content
Effects overview cover

​
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

Import-supported shadow patterns for elevated surfaces

​
What Lives In Effects

  • bundled opacity utilities
  • custom imported box-shadow patterns supported by the Skelementor importer

​
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
  • 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, or alpha-aware drop-shadow() effects on artwork.