Skip to main content
WebUtilsLabUseful tools, one clean workspace
CSS Shadow Studio

Box Shadow Generator

Build polished CSS box shadows with live preview, layered presets, color controls, and copy-ready output for plain CSS, Tailwind arbitrary values, and CSS variables.

Browser only

Everything runs locally in this page. Adjust the shadow, copy the code, and paste it into your project without uploading anything.

Live Shadow Preview

Use presets for speed, then fine-tune each shadow layer.

1 layer
Shadow Card Preview depth, softness, spread, color, and inset shadows in real time.

Shadow Controls

Select a layer, then adjust the values below.

0px
20px
48px
-18px
35%
24px
#0f172a
#ffffff
#f6f2e8

Copy Shadow Code

Use the CSS output for production. Tailwind output is best for single-layer utility use.

box-shadow: 0 20px 48px -18px rgba(15, 23, 42, 0.35);

Multiple comma-separated shadows are valid CSS. For Tailwind, complex multi-layer values are usually easier to keep in a CSS class or variable.

Detailed guide

The calculator stays focused here. The supporting reference has moved to its own page.

Read the Box Shadow Generator guide

Frequently asked questions

What is a box shadow generator?
A box shadow generator is a browser tool that helps you visually design CSS box-shadow values and copy the finished CSS for use in websites and apps.
Can CSS box-shadow use multiple layers?
Yes. CSS box-shadow supports multiple comma-separated shadow layers. Layered shadows often look more realistic than one large shadow.
Does this tool upload my design?
No. The shadow preview and generated code run entirely in your browser.

By Henry Weng ยท Updated