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);
}How to use the ToolOrbit Box Shadow Generator
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.
