Ad Slot
Box Shadow Generator
NEWGenerate CSS box-shadow values with live preview.
Ad Slot
Ad Slot
Frequently asked questions
What do X offset, Y offset, blur, and spread control?
X and Y offset move the shadow horizontally and vertically, blur softens its edges, and spread grows or shrinks the shadow's size before blurring is applied — all in pixels.
What does the inset checkbox do?
It switches the shadow from an outer drop shadow to an inner shadow cast inward from the element's edges, using CSS's inset keyword.
How is the shadow color applied?
You pick a base color and an opacity percentage, which the tool converts into an rgba() value so the shadow can be semi-transparent.
Ad Slot
Related tools
NEW
CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually.
NEW
Border Radius Generator
Generate CSS border-radius values for any shape.
NEW
CSS Button Generator
Design and generate CSS buttons visually with live preview.
NEW
PX to REM Converter
Convert between px, rem, and em units for CSS.
Ad Slot