Documentation versions (currently viewingVaadin 14)

Lumo Shadow

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

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.


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

    .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);