CSS Box Shadow Generator
Generate CSS box-shadow visually. Adjust offset, blur, spread, color, and inset. Multiple shadow layers support. Copy CSS code with one click. Free online tool.
CSS Code
Frequently Asked Questions
What is CSS box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows separated by commas. A box shadow is described by X and Y offsets, blur radius, spread radius, and color.
What is the difference between blur and spread?
Blur radius determines how blurry the shadow edges are (higher = more blurred). Spread radius expands or contracts the shadow size (positive values make the shadow larger, negative values make it smaller).
How do inset shadows work?
Adding the inset keyword flips the shadow to the inside of the element, creating an inner shadow effect. This is commonly used for buttons and input fields to create a pressed-in look.
Can I use multiple shadows?
Yes! Click "+ Add Layer" to stack multiple shadows. Each layer has its own offset, blur, spread, color, and inset settings. Layers are rendered in order, with the first layer on top.
What are the best box-shadow values for cards?
A popular card shadow is 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06). For a more dramatic effect, try 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05).
Is this tool free?
Yes, completely free with no sign-up required. All processing happens in your browser.