CSS Box Shadow Generator
Build a box-shadow by moving sliders and watching the result on a card. Stack up to six layers for softer, more realistic shadows, use inset for pressed effects, and start from presets such as soft, floating, glow or neumorphism. Copy the CSS with one click.
How to use it
- Pick a preset or adjust the offset, blur, spread, colour and opacity of the shadow.
- Add layers with + and select each one to edit it; change the background, box colour and corner radius to match your design.
- Copy the CSS and paste it into the rule of the element.
Frequently asked questions
What do blur and spread do?
Blur makes the edge of the shadow softer; zero gives a hard edge. Spread grows the shadow in every direction before blurring, and a negative spread shrinks it, which helps a large blurred shadow stay under the element.
Why use several shadow layers?
Real shadows are darker close to the object and fade further away. Combining a small, sharp shadow with a larger, softer one imitates that and looks more natural than a single shadow. The first layer in the list is drawn on top.
Does box-shadow slow down a page?
Not in normal use. Very large blurs on many elements, or animating the shadow itself, can cost performance on slow phones; to animate, change the opacity of a pseudo-element that has the shadow instead.
🏷️ Meta Tag Generator
🖼️ Open Graph Generator
🔗 UTM Builder
🌈 CSS Gradient Generator