Shadows give interfaces a sense of depth and hierarchy, lifting cards, buttons, and modals off the page. But the CSS box-shadow property packs several values into one line, and small changes have a big visual impact. The ToolOrbit CSS Box Shadow Generator lets you dial in every parameter with a live preview, then copy the exact code.
How the box-shadow property works
A box-shadow is defined by a series of values: horizontal offset, vertical offset, blur radius, spread radius, and color. The offsets move the shadow, blur softens its edges, spread grows or shrinks it, and the color, usually a semi-transparent black, sets its intensity. Adding the inset keyword draws the shadow inside the element instead of outside.
- Horizontal and vertical offset: position the shadow on the X and Y axes
- Blur radius: larger values create a softer, more diffuse shadow
- Spread radius: positive grows the shadow, negative shrinks it
- Color: use rgba with low alpha for natural, subtle shadows
- Inset: switches the shadow to render inside the element
.card {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.input-pressed {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}Designing a box shadow with a live preview
Adjust the sliders for offset, blur, and spread, pick a color and opacity, and toggle inset to see the difference instantly in the live preview. Once the shadow matches your design, copy the generated box-shadow rule and paste it into your CSS.
- Set horizontal and vertical offset to choose the light direction
- Increase blur for softer edges
- Tune spread to size the shadow
- Lower the color opacity for realism, then copy the code
Tips for layered, realistic shadows
Real-world depth often comes from stacking two or more shadows: a tight, darker one for contact and a wider, softer one for ambient light. Keep shadows consistent across your interface so elements at the same elevation share the same shadow. The ToolOrbit Box Shadow Generator makes it simple to test these combinations and copy polished results.
Reading a shadow, parameter by parameter
box-shadow: 0 8px 24px rgba(0,0,0,.12) reads as “no horizontal shift, 8px down, 24px blur, 12% black”. Offset places the shadow (0 offset = it hugs the element), blur softens it, spread grows the solid silhouette, and the color’s alpha decides intensity. Two stacked shadows — a tight, dark one for near elevation and a wider, faint one below — sell depth better than any single shadow. inset pushes the effect inside, which pairs well with pressed-button states.
- Small blur+small offset = crisp, cheap elevation.
- Large blur+large offset = floating cards, costly to fake by hand.
- Keep shadows subtle: alpha under 20% reads premium; heavy black reads dated.
