Last updated
Box Shadow Property Reference
- Horizontal offset: positive = right, negative = left
- Vertical offset: positive = down, negative = up
- Blur radius: 0 = hard edge, larger = softer shadow
- Spread radius: positive = larger shadow, negative = smaller
- Color: use rgba() for transparency control
- inset: shadow appears inside the element
- Multiple shadows: comma-separated, first listed is on top
The CSS Box Shadow Generator on TechConverter.me provides a visual interface with sliders for all shadow parameters and support for multiple shadow layers. Adjust the values, see the preview update instantly, and copy the generated CSS directly into your stylesheet.
Examples
Example 1: Elevation Scale for a Design System
A consistent shadow scale communicates depth and hierarchy across UI components:
/* Elevation 0 — flat, no shadow */
.elevation-0 {
box-shadow: none;
}
/* Elevation 1 — subtle card */
.elevation-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Elevation 2 — raised card */
.elevation-2 {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.06);
}
/* Elevation 3 — dropdown / popover */
.elevation-3 {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
}
/* Elevation 4 — modal dialog */
.elevation-4 {
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15),
0 10px 10px rgba(0, 0, 0, 0.04);
}
/* Elevation 5 — floating action button */
.elevation-5 {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
Example 2: Colored Shadows
Colored shadows that match the element's color create a more cohesive, intentional look:
/* Blue button with blue shadow */
.btn-primary {
background-color: #2563eb;
color: white;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.btn-primary:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
transform: translateY(-1px);
}
/* Green success button */
.btn-success {
background-color: #059669;
box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
}
/* Red danger button */
.btn-danger {
background-color: #dc2626;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}
/* Purple card accent */
.feature-card {
border-top: 3px solid #7c3aed;
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}
Example 3: Multi-Layer Shadows for Realism
Combining multiple shadow layers creates more realistic, three-dimensional depth:
/* Realistic card shadow (ambient + directional) */
.realistic-card {
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.08), /* contact shadow */
0 2px 2px rgba(0, 0, 0, 0.08), /* near shadow */
0 4px 4px rgba(0, 0, 0, 0.08), /* mid shadow */
0 8px 8px rgba(0, 0, 0, 0.08), /* far shadow */
0 16px 16px rgba(0, 0, 0, 0.08); /* ambient shadow */
}
/* Smooth layered shadow (popular technique) */
.smooth-shadow {
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
}