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