CSS box-shadow playground

Combine up to three box shadows with offset, blur, spread, color, and inset, then generate copy-ready code.

Presets

Choose a configuration as a starting point, then adjust any control.

Surface

background-color

color

Layer 1Shadows are painted front to back: layer 1 sits above layers 2 and 3.

Use this layer

Shadow color

Inner shadow (inset)

Layer 2

Use this layer

Shadow color

Inner shadow (inset)

Layer 3

Use this layer

Layered surface

HTML

<div class="box-shadow-sample">Layered surface</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<div class="box-border grid min-h-[14rem] w-full max-w-[22rem] place-items-center p-8 rounded-[24px] bg-[#f8fafc] text-[#172033] text-xl font-extrabold text-center [box-shadow:0px_4px_12px_-6px_#0f172a2e,0px_18px_42px_-16px_#0f172a59]">Layered surface</div>

CSS

.box-shadow-sample {
  box-sizing: border-box;
  inline-size: min(100%, 22rem);
  min-block-size: 14rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  border-radius: 24px;
  background-color: #f8fafc;
  color: #172033;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  box-shadow:
    0px 4px 12px -6px #0f172a2e,
    0px 18px 42px -16px #0f172a59;
}