An inset depth shadow effect built with pure HTML and CSS that simulates recessed layering through inner shadow techniques. It enhances dimensional realism and controlled surface depth without altering external layout flow.
Usage
Use this component when interfaces require embedded surface styling, such as input fields, toggles, control panels, cards, or containers that benefit from subtle recessed depth cues.
Implementation
The effect is created using CSS inset box shadow layering with adjusted blur and spread values, producing a controlled inner shading effect. Responsive styling maintains consistent rendering across screen sizes.
HTML
<div class="shadow-inset">
Recessed
</div>CSS
.shadow-inset {
width: 200px;
padding: 2rem;
border-radius: 11px;
background: #f3f4f6;
text-align: center;
font-size: 13px;
color: #374151;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.12),
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 2px 6px rgba(0,0,0,0.8),
inset 0 -2px 6px rgba(255,255,255,0.05);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses layered inset shadow styling
- Enhances recessed visual depth clarity
- Fully responsive across breakpoints
- Suitable for inputs and UI panels
- Easy to customize inner shadow intensity
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.