A recessed shadow pattern that suggests pressable or input-like surfaces.
HTML
<div class="shadow-inset">
Inset
</div>CSS
.shadow-inset {
width: 200px;
padding: 2rem 0;
border-radius: 11px;
background: #f3f4f6;
color: #374151;
font-size: 13px;
text-align: center;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.18),
inset 0 -2px 4px rgba(255,255,255,0.6);
}
@media (prefers-color-scheme: dark) {
.shadow-inset {
background: #020617;
color: #e5e7eb;
box-shadow:
inset 0 3px 6px rgba(0,0,0,0.85),
inset 0 -2px 6px rgba(255,255,255,0.05);
}
}Notes
- Clear recessed affordance
- No animation required
- Ideal for inputs and toggles
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.