CSS Box Shadow Generator
Create and customize CSS box shadows with a visual editor. Adjust offset, blur, spread, color, and toggle inset. See live previews and copy the CSS code instantly.
How to Use the CSS Box Shadow Generator
1
Adjust the Sliders
Set the offset X and Y to control shadow position. Adjust blur for softness, spread for size, opacity for transparency, and toggle inset for inner shadows.
2
Preview Live
The preview box updates in real time as you adjust each parameter. Change the preview background color to see how your shadow looks on different backgrounds.
3
Copy the CSS
Once you are happy with the result, click Copy Box Shadow CSS to copy the box-shadow declaration, or copy the CSS class version for your stylesheet.
Box Shadow Value Reference
| Value | Description | Example |
|---|---|---|
offset-x | Horizontal offset. Positive moves shadow right, negative moves left. | box-shadow: 5px 5px 5px #000; |
offset-y | Vertical offset. Positive moves shadow down, negative moves up. | box-shadow: -5px 5px 5px #000; |
blur-radius | Blur radius. Higher values make the shadow softer and more spread out. Must be 0 or positive. | box-shadow: 2px 2px 20px #000; |
spread-radius | Spread radius. Positive expands the shadow, negative shrinks it. | box-shadow: 0 0 10px 5px #000; |
color | Shadow color. Supports any CSS color value including rgb(), rgba(), hsl(), and hex. | box-shadow: 2px 2px 5px rgba(0,0,0,0.5); |
inset | Draws the shadow inside the element instead of outside. Creates a recessed effect. | box-shadow: inset 0 2px 5px #000; |
Frequently Asked Questions
CSS box-shadow is a property that lets you add shadow effects to HTML elements. It can create drop shadows (offset, blur, spread, and color) or inner shadows using the inset keyword. Multiple shadows can be layered for complex effects.
Yes, you can apply multiple box-shadows by separating each shadow with a comma. For example: box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3). This creates layered shadow effects.
Outset (default) shadows are drawn outside the element's border, creating a drop shadow. Inset shadows are drawn inside the element, creating a recessed or carved effect. Use the inset keyword to switch between them.
CSS box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 9+ also supports it. No vendor prefixes are needed for current browser versions.
Box-shadows with large blur radii or multiple layers can impact rendering performance, especially during animations. For the best performance, use blur values sparingly and avoid animating box-shadow properties. Consider using CSS transforms or opacity for smoother animations.
Ad