> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Effects

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

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Effects.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=0e9b698f9ac3ee5e3b477a7ba27b41d9" className="dark:hidden block" alt="Effects overview cover" width="4054" height="2489" data-path="images-for-overview/Effects.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Effects%20-%20Dark.png" className="hidden dark:block" alt="Effects overview cover (dark)" />
</div>

## Overview

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

<CardGroup cols={2}>
  <Card title="Opacity" icon="circle-half-stroke-horizontal" href="/effects/opacity">
    The shipped opacity scale for muted, layered, and disabled states
  </Card>

  <Card title="Box Shadow" icon="moon-over-sun" href="/effects/box-shadow">
    Outer and inset shadow utilities for elevated and recessed surfaces
  </Card>
</CardGroup>

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

<Warning>
  **Accessibility Note:** Ensure sufficient contrast when using opacity. Text
  with low opacity may not meet accessibility standards.
</Warning>

#### 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.