What Is box-shadow?
box-shadow is the CSS property that adds a shadow to an element. Used well, shadow creates depth and hierarchy in an interface: cards lift off the background, buttons look clickable, dropdowns stand out. This tool lets you adjust the five shadow parameters visually, see the result in a live preview and copy the code in one click.
Parameters
- Horizontal/Vertical offset: the shadow's position relative to the element. A small vertical offset (e.g. 8px) usually gives a natural "light from above" feel.
- Blur: the shadow's softness. A high value is softer and more diffuse; a low value is sharper.
- Spread: the shadow's size. A negative value shrinks it and looks more elegant.
- Color & opacity: the shadow color and opacity; opacity appears as rgba() in the code. Low opacity (e.g. 15%) looks realistic.
- Inset: moves the shadow inside the element; used for a recessed/inset effect.
Tips
For a realistic shadow, a single soft, low-opacity shadow is usually enough; very dark or very wide shadows look artificial. A common starting point in modern card design: 0px 8px 24px -4px at 10–15% opacity. Manage your color choices with our Color Code Converter. For a corporate, consistent design system and interface, see our web design service.