surface metal brushed panel hardware hardware-style settings panels premium control strips luxury product showcases glass is too soft for some brands need a more industrial material feel want premium metallic UI in pure CSS
Brushed Metal
Fetch snippet JSON:
curl https://webspire.de/snippets/surfaces/brushed-metal.json Surfaces
Brushed Metal
A directional material grain makes the surface feel machined rather than flat.
Background
Customize
Quick Start
<div class="brushed-metal rounded-[1.75rem] p-8 text-slate-900"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 902 bytes · 36 lines
- Custom Properties
-
--metal-base - Classes
-
.brushed-metal
surface metal brushed panel hardware
This is useful when the interface should feel machined or engineered instead of airy and glassy. It pairs well with darker surroundings and strong typography.