Design soft cards
Use gentle blur and low opacity for elegant cards, dashboards and content blocks.
Free CSS shadow tool for designers and creators
Create smooth box shadows instantly.
Adjust blur, spread, offsets, color and opacity. Preview your shadow live and copy clean CSS for cards, buttons, images and interface elements.
Shadow
box-shadow: 0px 24px 60px 0px rgba(21, 16, 24, 0.28);
Copy clean CSS
Copy one CSS line and paste it into your website, prototype or design system.
Create depth
Tune offset, spread and opacity to make buttons, images and panels feel layered.
What is a box shadow generator?
A box shadow generator helps you create CSS shadows visually. Instead of guessing the right blur, spread or offset values, you can adjust sliders and copy the exact CSS.
Box shadows are useful for cards, buttons, modals, images, navigation bars and product blocks. A soft shadow can add hierarchy and depth without making the design feel heavy.
This tool creates clean CSS using the standard box-shadow property, ready to paste into your stylesheet, website builder, WordPress site or HTML file.
Frequently asked questions
What does box-shadow do in CSS?
The box-shadow property adds a shadow around an element. You can control horizontal offset, vertical offset, blur, spread and color.
What is a good shadow for cards?
Soft card shadows usually use a low opacity, a larger blur and a small negative spread. This creates lift without harsh edges.
Can I use this for buttons?
Yes. Smaller blur and spread values usually work best for buttons. For cards and modals you can use larger, softer shadows.