About this tool
Adjust horizontal and vertical offset, blur radius, spread, color and opacity with sliders, and watch the shadow render live on a sample card. The generated box-shadow declaration is ready to copy, including the inset variant if you need it.
Good shadows are how flat interfaces communicate depth and hierarchy. The craft detail most people miss: realistic shadows are larger and softer than instinct suggests, with very low opacity — often two or three layered shadows rather than one. Heavy dark single shadows are the most reliable sign of an untuned interface.
How to use it
- Drag the sliders for offset, blur, spread and opacity.
- Pick the shadow color (near-black with low opacity reads most natural).
- Copy the CSS — layer multiple shadows by separating them with commas.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge; spread grows or shrinks the shadow's size before blurring. Negative spread plus high blur creates soft, contained shadows.
How do I make an elevation-style shadow like Material Design?
Layer two shadows: a small sharp one for contact (0 1px 2px) plus a large soft one for ambience (0 8px 24px), both at low opacity.
What does inset do?
It flips the shadow inside the element, useful for pressed button states and recessed input fields.