A medium shadow box built with pure HTML and CSS that applies balanced shadow depth to UI elements. It enhances moderate elevation clarity and structured surface separation without overpowering the layout.
Usage
Use this component when interfaces require balanced depth styling, such as cards, panels, content containers, or dashboard widgets that need noticeable yet controlled elevation.
Implementation
The effect is implemented using moderate offset box shadow values with controlled blur and opacity, creating a stable mid level elevation appearance. Responsive styling ensures consistent rendering across screen sizes.
HTML
<div class="ss-shadow medium">Medium Shadow</div>CSS
.ss-shadow.medium{
padding:26px;
border-radius:14px;
background:var(--med-bg);
color:var(--med-text);
box-shadow:0 14px 30px var(--med-shadow);
}
:root{
--med-bg:#ffffff;
--med-text:#0f172a;
--med-shadow:rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark){
:root{
--med-bg:#020617;
--med-text:#e5e7eb;
--med-shadow:rgba(0,0,0,.7);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses balanced shadow layering
- Enhances mid level surface elevation visibility
- Fully responsive across breakpoints
- Suitable for cards and content panels
- Easy to customize blur radius 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.