Tabs that switch state using elevation and shadow depth instead of fills, lines, or sliders.
HTML
<div class="tabs-elevated">
<button class="is-active">Overview</button>
<button>Usage</button>
<button>Billing</button>
</div>CSS
.tabs-elevated {
width: 200px;
display: flex;
gap: 0.3rem;
}
.tabs-elevated button {
flex: 1;
padding: 0.45rem 0;
border-radius: 12px;
border: none;
background: #f3f4f6;
font-size: 11px;
color: #374151;
cursor: pointer;
box-shadow: inset 0 0 0 rgba(0,0,0,0);
transition: box-shadow 150ms ease, transform 150ms ease;
}
.tabs-elevated button.is-active {
background: #ffffff;
box-shadow: 0 10px 20px rgba(0,0,0,0.18);
transform: translateY(-1px);
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.tabs-elevated button {
background: #020617;
color: #9ca3af;
}
.tabs-elevated button.is-active {
background: #111827;
color: #e5e7eb;
box-shadow: 0 10px 24px rgba(0,0,0,0.8);
}
}Notes
- State conveyed via depth, not color
- No fills, sliders, or underlines
- Ideal for dense dashboards
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.