Free CSS box shadow generator with live preview. Customize shadows for UI design and web development. Copy CSS code instantly for your projects.
Preview of your box shadow
Create stunning CSS box shadows effortlessly with our free online generator. Adjust offset, blur, spread, color, and inset properties using the intuitive visual editor with real-time preview. Perfect for UI designers and web developers enhancing user interfaces with depth and dimension. No coding required - just customize, copy the CSS code, and implement instantly in your projects.
In box-shadow: 10px 10px 10px 0px #000000, the first two numbers move the shadow right and down, the third is the blur radius and the fourth is the spread, which grows or shrinks it. The colour comes last, and the optional inset keyword moves the shadow inside the element.
Use small offsets, a bigger blur and a see-through colour. The picker sets solid HEX colours, but you can type an rgba() value such as rgba(0, 0, 0, 0.15) into the colour text box and it carries straight into the CSS.
This generator builds one shadow at a time. To stack several, copy the values for each shadow and join them with commas inside a single box-shadow declaration.
Yes. box-shadow has worked without vendor prefixes in every major browser for years, so the copied CSS runs as-is in Chrome, Firefox, Safari and Edge.
No. The preview and code update in your browser as you move the sliders, so changes show up instantly and there is nothing to sign up for.
