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.

Examples

HTML

  1. <div class="box xs shadow">XS</div>
  2. <div class="box s shadow">S</div>
  3. <div class="box m shadow">M</div>
  4. <div class="box l shadow">L</div>
  5. <div class="box xl shadow">XL</div>
  7. <custom-style>
  8.   <style>
  9.     .shadow.xs {
  10.       box-shadow: var(--lumo-box-shadow-xs);
  11.     }
  12.     .shadow.s {
  13.       box-shadow: var(--lumo-box-shadow-s);
  14.     }
  15.     .shadow.m {
  16.       box-shadow: var(--lumo-box-shadow-m);
  17.     }
  18.     .shadow.l {
  19.       box-shadow: var(--lumo-box-shadow-l);
  20.     }
  21.     .shadow.xl {
  22.       box-shadow: var(--lumo-box-shadow-xl);
  23.       width: calc(var(--lumo-size-xl) * 1.2);
  24.       height: calc(var(--lumo-size-xl) * 1.2);
  25.     }
  26.   </style>
  27. </custom-style>