<main>
<div class="glass-grid">
<div class="glass-effect glass-2-1"></div>
<div class="glass-effect glass-2-2"></div>
<div class="glass-effect glass-1-1"></div>
<div class="glass-effect glass-1-1"></div>
<div class="glass-effect glass-2-1"></div>
<div class="glass-effect glass-1-1"></div>
<div class="glass-effect glass-1-1"></div>
</div>
</main>About this button
A grid of frosted glass pills and circles made with backdrop-filter, layered inset shadows and a subtle scale-up on hover.
How it works
Each tile has a ten percent white background with a backdrop-filter that blurs and brightens what is behind it. Layered inset and outer shadows in oklch colours draw the highlights and the glass edge, and a small transition scales the tile on hover. The grid uses em units, so everything scales with one font-size.
Ways to customise it
- Change the font-size on the grid to resize all tiles.
- Raise the backdrop blur for frostier glass.
- Place the grid over a colourful photo or gradient.
Good to know
Glass needs something behind it to show off, so test it over your own background. backdrop-filter and oklch are supported by current browsers, and the shadows are the fallback look elsewhere.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.