CSS Box Shadow Generator
Last updated: June 2026 · Free · No sign-up required
Frequently Asked Questions
What is the difference between blur and spread in box-shadow?
Blur radius determines how soft or fuzzy the edges of the shadow will be. Spread radius expands or contracts the overall shape of the shadow in all directions before the blur is applied.
What does the 'Inset' checkbox do?
The inset keyword changes the shadow from an outer shadow (which makes the element look raised) to an inner shadow (which makes the element look sunken or pressed into the background).
How do I use rgba() color in CSS?
The rgba() function stands for Red, Green, Blue, and Alpha (opacity). Alpha is represented by a decimal value between 0 (completely transparent) and 1 (fully opaque), which allows you to create realistic, semi-transparent shadows.
Quick reference
| Value | Controls |
|---|---|
| offset-x | horizontal shadow position |
| offset-y | vertical shadow position |
| blur | softness of the edge |
| spread | how far the shadow grows |
| inset | shadow inside the element |
Interpretation guide
| Effect | Recipe |
|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,.12) |
| Floating | 0 10px 25px rgba(0,0,0,.15) |
| Inner shadow | inset 0 2px 4px rgba(0,0,0,.2) |
Formula & methodology
Formula: box-shadow: offset-x offset-y blur spread color (prefix with inset for inner shadows)
The generator builds a CSS box-shadow from sliders for offset, blur, spread and colour, with a live preview of the depth effect.
- Set horizontal and vertical offsets to place the shadow.
- Increase blur for softness and spread for size.
- Choose a colour and opacity (rgba).
- Copy the generated box-shadow declaration into your CSS.
Worked example: 0 10px 25px rgba(0,0,0,0.15) creates a soft floating-card shadow.