CSS Box Shadow Generator

The CSS Box Shadow Generator is a free online tool that allows you to visually create shadows for any element. As you adjust the sliders, the preview updates instantly and generates the final CSS code for easy copy and paste.

The horizontal shadow (offset-x) shifts the shadow left or right, while the vertical shadow (offset-y) shifts it up or down. Positive values move the shadow right/down, and negative values move it left/up.

The blur radius determines how soft or sharp the shadow edges appear. A value of 0 creates a sharp shadow, while a higher value produces a smoother, more realistic blur effect.

The spread radius affects the size of the shadow. A positive value expands the shadow outward, making it larger than the element, while a negative value contracts the shadow inward.

You can choose any color for the shadow, and the opacity slider allows you to adjust its transparency. The generator automatically converts the HEX color into RGBA for smooth control.

The inset option changes the shadow from an outer shadow to an inner shadow. This creates a “pressed-in” effect, often used for modern UI components and input fields.

Yes, the generator automatically includes -webkit and -moz vendor prefixes to ensure compatibility with older browsers where needed.

The current generator outputs one shadow at a time, but you can manually combine multiple shadows by separating each set of values with commas in your CSS.

Yes! All box shadow values are pixel-based, so they automatically adapt to any screen size without breaking your layout.

Absolutely. Just copy the generated CSS code block and paste it into your stylesheet or inline style attribute. No modification is needed.