Box Shadow Generator
Build a CSS box shadow with offset, blur, spread and colour. The code updates live and is ready to paste into your stylesheet.
Shadow settings
Preview
Private by design. All computation happens in your browser. Nothing you adjust is sent anywhere.
How box-shadow works
The five values
offset-x and offset-y move the shadow horizontally and
vertically. blur-radius softens the edges — zero gives a sharp edge,
larger values give a softer glow. spread-radius expands or shrinks the
shadow before the blur is applied.
Colour and opacity
Use an RGBA or hex colour with an alpha channel to control transparency. The colour picker here outputs hex plus a separate opacity slider so you can dial in exactly how subtle or pronounced the shadow should be.
Inset shadows
Tick "Inset" to turn the shadow inward — useful for pressed buttons, inner frames and inset cards.
How to use the Box Shadow Generator
- Set the horizontal and vertical offset, blur and spread.
- Pick a shadow colour and toggle inset.
- Copy the generated box-shadow rule.
Frequently asked questions
What is the inset option?
Inset draws the shadow inside the element rather than behind it, for a pressed-in look.
Can I create multiple shadows?
The generator produces a single shadow; stack several rules in CSS for layered effects.
Does the preview match the CSS?
Yes. The live preview uses exactly the rule you copy.