Glass and materials
The control layer floats in glass; content sits on materials
Glass over colour
The sidebar, top bar, menus and dialogs use it.
GlassBlur, light edge, shine
Clear glassOver pictures only
Thin
Regular
Thick
Code
<div class="glass-demo">
<div class="glass glass-tile"><b>Glass</b><span class="muted">Blur, light edge, shine</span></div>
<div class="glass-clear glass-tile"><b>Clear glass</b><span>Over pictures only</span></div>
<div class="material-thin glass-tile"><b>Thin</b></div>
<div class="material glass-tile"><b>Regular</b></div>
<div class="material-thick glass-tile"><b>Thick</b></div>
</div>Reduce transparency
People who turn glass off in the customizer, or in their system, get solid surfaces.
Code
<button type="button" class="btn btn-gray" data-bs-toggle="offcanvas" data-bs-target="#customizer" aria-controls="customizer"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open the customizer</button>