Design & color · Css
CSS Box Shadow Generator
Generate CSS box-shadow values with custom offset, blur, spread, colour, and inset options. Copy-ready CSS output. Free online box shadow generator.
How it works
Generates a CSS box-shadow value from offset, blur, spread, color, and inset settings. The value can be copied directly into any stylesheet.
Step by step
- 1Set horizontal and vertical offsets (positive = right/down, negative = left/up).
- 2Increase blur radius for a softer shadow.
- 3Use spread to expand or shrink the shadow size.
- 4Choose a shadow colour — include an alpha value for transparency.
- 5Enable 'Inset' to place the shadow inside the element border.
Examples
Soft elevation shadow
A classic card elevation shadow: centred horizontally, dropping 4px, with a 12px blur and 25% opacity.
Inputs
- offset_x:
- 0
- offset_y:
- 4
- blur:
- 12
- spread:
- 0
- color:
- #00000040
- inset:
- false
Result
- css:
- 0 4px 12px 0 #00000040
Frequently asked questions
How do I make a shadow more transparent?▾
Use an 8-digit hex colour where the last two digits control opacity (00 = transparent, FF = opaque). For example, #00000040 is black at 25% opacity. Alternatively use rgba(), e.g. rgba(0,0,0,0.25).
Can I stack multiple shadows?▾
Yes — CSS box-shadow accepts multiple shadow values separated by commas. For example: box-shadow: 0 2px 4px #0002, 0 8px 24px #0001;