> Markdown version of [Shadow](https://vaadin.com/docs/v14/flow/styling/lumo/shadow). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Lumo Shadow

Shadows are used to indicate elements which are stacked on top of other elements in the UI.

## <a id="box-shadow"></a>Box Shadow

- \--lumo-box-shadow-xs: `0 1px 4px -1px var(--lumo-shade-50pct)`

  Elements closest to the application background, for example cards.

- \--lumo-box-shadow-s: `0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct)`

  Tooltips, etc.

- \--lumo-box-shadow-m: `0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct)`

  Contextual popups, such as select menus.

- \--lumo-box-shadow-l: `0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct)`

  Elements that rise above above most elements in the UI, for example dialogs.

- \--lumo-box-shadow-xl: `0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct)`

  Elements highest in the stacking order, for example notifications, which should be above all other content.

## <a id="examples"></a>Examples

```html
<div class="box xs shadow">XS</div>
<div class="box s shadow">S</div>
<div class="box m shadow">M</div>
<div class="box l shadow">L</div>
<div class="box xl shadow">XL</div>

<custom-style>
  <style>
    .shadow.xs {
      box-shadow: var(--lumo-box-shadow-xs);
    }
    .shadow.s {
      box-shadow: var(--lumo-box-shadow-s);
    }
    .shadow.m {
      box-shadow: var(--lumo-box-shadow-m);
    }
    .shadow.l {
      box-shadow: var(--lumo-box-shadow-l);
    }
    .shadow.xl {
      box-shadow: var(--lumo-box-shadow-xl);
      width: calc(var(--lumo-size-xl) * 1.2);
      height: calc(var(--lumo-size-xl) * 1.2);
    }
  </style>
</custom-style>
```

`AD07FE65-EB1B-45F9-88AF-AA34FA64868B`