How to Generate a CSS Box Shadow

Enter the shadow settings, choose whether the shadow is inset, and generate the CSS declaration. The result includes your offsets, blur, spread, and color, with inset added when enabled.

What the CSS box shadow generator does

A CSS box shadow adds depth around an element by combining horizontal and vertical offsets with blur, spread, and color. This generator turns those choices into a CSS box-shadow declaration, so it can help when you want to adjust the effect without writing the declaration from scratch.

The controls are optional. If you leave them unchanged, the tool provides defaults for the horizontal offset, vertical offset, blur, spread, color, and inset setting. You can also use zero for the tested numeric shadow values when you need a centered or tightly controlled effect.

Step-by-step instructions

1. Open the CSS Box Shadow Generator.
2. Set the horizontal offset. A positive value moves the shadow to the right, while a negative value moves it to the left.
3. Set the vertical offset. A positive value moves the shadow downward, while a negative value moves it upward.
4. Enter a blur value to control how softly the shadow fades. Set the spread value to change the shadow's expansion before blur is applied.
5. Enter the shadow color, such as a hexadecimal color with transparency if that matches your design.
6. Enable the inset option when the shadow should appear inside the element rather than outside it.
7. Run the computation or use the available generate action, then copy the resulting CSS declaration into the relevant selector.

The numeric shadow inputs are optional, and the color input is optional as well. The tool's defaults are horizontal offset 2, vertical offset 2, blur 5, spread 0, color #00000033, and inset disabled. Change only the values that need to differ from those defaults. The generated declaration adds px to the four numeric shadow values and includes inset when that option is enabled.

How to read and use the result

Read the result as one CSS box-shadow declaration containing the supplied horizontal offset, vertical offset, blur, spread, and color. The four numeric values are presented with px, and an enabled inset choice is represented by inset in the declaration. If inset is not enabled, the declaration describes an outer shadow.

A centered shadow can use zero for the horizontal and vertical offsets. The tested computation also accepts zero for blur and spread, so those values can represent a deliberately sharp or unexpanded result. The successful result path indicates that the declaration was produced for the supplied settings.

Before using the declaration, check the visual effect in the element where it will appear. A shadow can look different depending on the element's size, background, nearby colors, and surrounding layout. The generator creates the declaration; it does not determine whether a particular shadow suits the rest of your design.

Worked example

A designer wants a centered shadow that falls below a card without placing the shadow inside the card.

Set the horizontal offset to 0, vertical offset to 4, blur to 12, spread to 0, and the color to a chosen shadow color, leave inset disabled, and generate the declaration.

A CSS box-shadow declaration containing the chosen offsets, blur, spread, and color, with no inset token because the inset option is disabled.

Limitations

• The generator produces the CSS declaration from the selected settings; judging the visual fit of the shadow still requires checking it in the target design.

Common errors

• If the result does not match the intended effect, check that each numeric value is in the control you meant to change and that the color input contains the intended color. Correct the relevant input, then generate the declaration again.

FAQ

Can I generate a shadow without filling in every control?

Yes. Leave the optional controls unchanged to use the tool's defaults, or replace individual values with your own settings.

How do I make a centered box shadow?

Use zero for the horizontal and vertical offsets when you want the shadow centered. The tested computation also accepts zero for blur and spread.

How do I create an inset box shadow?

Enable the inset option before generating the declaration. The result then includes inset; when the option is off, it describes an outer shadow.