CSS Box Shadow Generator

Visually tweak custom box-shadow parameters and instantly generate cross-browser CSS rules.

Horizontal Offset 0px

Vertical Offset 10px

Blur Radius 25px

Spread Radius -3px

Shadow Color & Opacity

Opacity

Inset Shadow

Live Element Preview:

Generated CSS Rule:

box-shadow: 0px 10px 25px -3px rgba(0, 0, 0, 0.4);

Syntax Reference

1. Property Parameters

The syntax accepts offsets, blur radius, spread radius, and color values sequentially: box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

2. Multiple Shadows

You can apply multiple comma-separated box shadows to a single element to create advanced layered depth effects.

What is CSS Box Shadow Generator?

CSS Box Shadow Generator is a browser-based developer utility that helps you work with its relevant input and output without installing a separate desktop application.

How to use this tool

Enter or paste the required input, select the available options, then review the result before copying or applying it in your project. Test the result in its target environment when accuracy matters.

Frequently Asked Questions (FAQ)

Yes. This tool is designed to process the values you enter in your browser.