What is Box Shadow Generator?

Box Shadow Generator is a tool for adjusting CSS box-shadow visually and checking the generated code. You can tune offset, blur, spread, color, and inset while watching the preview update in real time.

It is useful for designing shadows for cards, buttons, modals, and other UI elements.

How to Use

1. Adjust the shadow values with the sliders.
2. Change the shadow color or turn inset on if needed.
3. Check the preview.
4. Copy the generated CSS.

Main Settings

offsetX / offsetY

These control the horizontal and vertical position of the shadow. Positive and negative values change the direction of the shadow.

blur

This controls how soft the shadow looks. Larger values create a softer shadow.

spread

This changes how wide the shadow extends. It is useful when you want a tighter or broader shadow.

Shadow Color / inset

You can change the shadow color. When inset is enabled, the shadow is drawn inside the element instead of outside it.

Preview Colors

You can change the box color and background color for preview only. These values are not included in the generated CSS.

Input and Output Example

For example, if you use offsetX: 0, offsetY: 8, blur: 16, spread: 0, and rgba(0, 0, 0, 0.15) as the color, the result becomes:

box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

If you turn inset on, the result becomes:

box-shadow: inset 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

Use Cases

• Adding natural shadows to buttons or cards
• Adjusting elevation for modals and panels
• Creating inset shadows for pressed or recessed effects
• Comparing shadow colors while checking the preview

Things to Keep in Mind

• Preview colors are not included in the generated CSS
• Too much blur or spread can make the shadow look weak or muddy
• Inset and outer shadows create very different impressions, so it is worth checking both in context