---
title: "Shadow"
canonical: https://sky-ui.cf.sky.com/foundations/shadow
---

# Shadow

Different levels of elevation for static and selectable elements.

## Purpose

Shadows or elevations, as they’re sometimes called, are used for styling of both static and selectable elements of the UI with a choice of four elevation heights.

Shadow styling is most commonly used for containers such as [Cards](/components/card/), [Modals](/components/modal/), [Accordions](/components/accordion/).

These styling effects are typically used as visual aids for identifying the different states of a component, i.e. Default and Hover states for the [Radio Card](/components/radio-card/).

## Shadow Styles

{'Shadow 1'}
      For non-interactive containers (e.g. static [Cards](/components/card/), [Product
        Card](/components/product-card/), Deal Card).
    
  Shadow 2
      For interactive elements in default state (e.g. [Accordion](/components/accordion/), [Radio
        Card](/components/radio-card/), [Signpost](/components/signpost/)).
    
  Shadow 3
      For interactive elements in a hover state. (e.g. [Accordion](/components/accordion/), [Radio
        Card](/components/radio-card/), [Signpost](/components/signpost/)).
    
  Shadow 4
      For overlay elements floating above the main page content (e.g.
        [Modals](/components/modal/), [Popover](/components/popover/)).