A directional depth shadow effect built with pure HTML and CSS that simulates elevation based on a defined light source direction. It enhances spatial realism and layered visual hierarchy within modern UI layouts.
Usage
Use this component when interfaces require angled shadow emphasis, such as cards, panels, feature blocks, or dashboard widgets that benefit from directional depth styling.
Implementation
The effect is achieved using offset box shadow layering with controlled blur and spread values, aligned to a consistent directional light source. CSS ensures responsive scaling and consistent shadow rendering across screen sizes.
HTML
<div class="shadow-directional">
Directional
</div>CSS
.shadow-directional {
width: 200px;
padding: 2rem 0;
border-radius: 11px;
background: #ffffff;
color: #111827;
font-size: 12px;
text-align: center;
box-shadow:
6px 6px 18px rgba(0,0,0,0.12),
-2px -2px 6px rgba(255,255,255,0.8);
}
@media (prefers-color-scheme: dark) {
.shadow-directional {
background: #27272a;
color: #f4f4f5;
box-shadow:
8px 8px 24px rgba(0,0,0,0.7),
-2px -2px 6px rgba(255,255,255,0.06);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses directional shadow layering
- Enhances three dimensional visual structure
- Fully responsive across breakpoints
- Suitable for cards and UI panels
- Easy to customize shadow angle and 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.