HTML Tools
Box Shadow Generator
Build CSS box-shadow values visually using sliders for offset, blur, spread and opacity. Choose shadow and box colours, toggle inset mode, and preview the result live. Copy the generated CSS property with one click.
About the Box Shadow Generator
Adjust the sliders to build a CSS box-shadow value visually. The live preview updates as you drag. Copy the generated CSS and paste it directly into your stylesheet.
Inset moves the shadow inside the element's border. Spread expands or contracts the shadow beyond the blur — negative spread creates a tighter shadow.
Frequently asked questions
What does the spread radius do?
Spread expands or contracts the shadow beyond the blur edge. A positive value makes the shadow larger than the element; a negative value shrinks it. Combined with zero blur and zero offset it creates a solid border effect.
What is an inset shadow?
Adding the inset keyword moves the shadow inside the element's border rather than outside. It is useful for creating pressed or embossed UI effects.