CSS Box Shadow Generator Online
Design a shadow for a card, button or inset panel and inspect it before copying the declaration. Control horizontal and vertical offsets, blur, spread, color and opacity independently. The output is a single box-shadow layer, ready to place inside the CSS selector for your element.
- Adjust offset, blur and spread separately
- Preview outside and inset shadows
- Export a color-and-opacity CSS declaration
Start with a soft card shadow
The example uses a horizontal offset of 0, vertical offset of 8 pixels, blur of 24 pixels and black at 20 percent opacity. Generate it to see a soft shadow below the preview box. Increase opacity for a stronger effect or reduce it for a quieter card boundary. Copy the declaration into the component selector after comparing it against the actual page background.
Separate blur from spread
Blur softens the shadow edge and must be zero or positive. Spread changes the shadow’s size before blur is applied: positive spread expands it, while negative spread contracts it. Horizontal and vertical offsets move the shadow relative to the element. These controls solve different visual problems, so change one at a time if a shadow looks too large or too sharply defined.
Switch between outer and inner shadows
Outside mode casts the shadow around the box. Inset mode paints inside the border edge, which can make an input or panel appear recessed. The preview shows a single solid rectangle; border radius and element dimensions in your final component can change the appearance. Ancestor overflow settings may also clip an outer shadow even when the declaration itself is valid.
Apply the generated declaration carefully
The tool emits one box-shadow value and supports offsets and spread between -100 and 100 pixels, with blur from 0 to 100. Assigning the declaration replaces an existing box-shadow on the same selector unless you merge layers manually. A shadow does not add space to document layout. Use margins or padding where surrounding content needs actual separation, and check the result on smaller screens.
Technical references: CSS box-shadow reference