CSS Box Shadow Generator
Visually design and generate clean, cross-browser compatible CSS code for the `box-shadow` property, perfect for buttons, cards, and containers.
1. Shadow Dimensions & Type
2. Color & Opacity
Live Preview
Generated CSS Code
How to Use the CSS Box Shadow Generator
The `box-shadow` property is one of the most effective ways to add depth and dimension to your web elements. It accepts several values to define the shadow's appearance: the horizontal and vertical offsets determine the shadow's direction, the blur radius controls its sharpness, and the spread radius expands or contracts the shadow size. You can also specify whether the shadow is `inset` (inside the element, creating a pressed look) or `outset` (the default, creating a lift effect).
Using our tool, you can skip the manual code input and generate complex, multi-layered shadows visually. Simply adjust the sliders to achieve the desired effect and copy the clean, one-line CSS code.
Frequently Asked Questions (FAQ)
What is the difference between blur and spread?
The blur radius (the third value) defines how soft the shadow edges are; a higher value creates a softer, wider shadow. The spread radius (the fourth value) increases or decreases the size of the shadow itself before any blur is applied. A positive spread expands the shadow, while a negative value contracts it.
How do I create a glowing effect with box-shadow?
To create a glow, set both the H-Offset and V-Offset to `0px`. Then, choose a low Spread Radius (e.g., 2px) and a high Blur Radius (e.g., 20px). Using a bright, vibrant color with high opacity will enhance the glow effect, making the element appear to float or emit light.
Related CSS Tools
Check out our other tools to complete your web design process: