Compose a CSS box-shadow property

With Shadow generator, designers and front-end developers can tune an interface before implementation. Compose a CSS box-shadow property.

Compose a CSS box-shadow property. The tool is free in your browser and shows the result without asking you to create an account.

How to use

Enter the horizontal and vertical offset for the shadow, then the blur and spread values.
Provide the colour in hexadecimal format, using six digits preceded by a hash sign.
Click the generate button to obtain the complete box-shadow property.
Copy the produced rule and paste it into your stylesheet to apply it.
Adjust the values if the rendering does not match the effect you want.

Example

The sample input describes a shifted shadow with blur and a dark colour. After generating, the result shows the corresponding box-shadow property. You can change one value at a time to see how each setting influences the shadow.

Input

Output

box-shadow: 2px 2px 8px 1px #000000;

Limits and formats

The tool does not preview the shadow on an element; it only provides the CSS code.
Offset, blur and spread values must be numeric, and offsets can be negative.
The colour must be valid hexadecimal; a malformed colour prevents generation.
The final rendering depends on the browser and the element context.

Where processing happens

Everything happens in your browser. The settings you enter stay on your device and are never uploaded or stored. The CSS property is assembled locally, with no external connection.

Frequently asked questions

What units should I use for offsets and blur?

Values are usually unitless for offsets and blur, as they represent pixels. You can also add a unit such as px or rem. Keep the same logic for all values.

Can I use a transparent colour?

The field expects a hexadecimal colour. For a transparent shadow, you can use a colour with an alpha channel if the format allows it, but the simplest approach is to choose a solid colour and adjust opacity in your CSS.

Why is my shadow not visible?

Check that the property is applied to an element with a visible size. A blur or spread value that is too small can make the shadow invisible. Also make sure the colour is not identical to the background.