Documentation versions (currently viewingVaadin 14)
You are viewing documentation for an older Vaadin version. View latest documentation

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