urlkit[ CREATE / [▣] ]
CSS box shadow generator
Tune offsets, blur, spread, color, and opacity with a shadow preview.
02 / Your result
Your result will appear here.
Start with your own input or try an example.
What it does
Shape a shadow for a card, button, or inset panel without repeatedly editing a stylesheet. Set the horizontal and vertical offsets, blur, spread, color, and opacity, then compare the preview. Generate a single CSS box-shadow declaration and copy it directly into your component styles.
Useful when
- Give a card a soft shadow that matches your interface palette.
- Test an inset treatment for a recessed panel.
- Create a reusable shadow value for a small component library.
How to use it
- Choose a shadow color and set offsets, blur, spread, and opacity.
- Select inset if needed, then generate and inspect the preview.
- Copy the box-shadow declaration or download it as a CSS file.
A few useful details
How do blur and spread differ?
Blur softens the shadow edge and must be zero or positive. Spread expands the shadow for positive values or contracts it for negative values. Both are expressed in CSS pixels, independently of the horizontal and vertical offsets.
What does the inset option do?
Inset draws the shadow inside the element, creating a recessed effect. Leaving it off draws the shadow outside. The preview uses a fixed white card; its size and background can differ from your final component.
Which settings and limits are supported?
Offsets range from −200 to 200 pixels, blur from 0 to 200, spread from −100 to 100, and opacity from 0 to 1. Color uses opaque HEX, RGB, or HSL, with opacity applied separately. This generator produces one shadow layer and rounds settings to two decimal places.