CSS shadows

Design multi-layer box-shadow with a live preview and copy the CSS or Tailwind class.

Processed in your browser · Check it yourself Nothing sentData sent: 0 · To other domains: 0Analytics: not present · Ads: not present

Box background

Shadow layers

Layer 1

Horizontal: 0pxVertical: 4pxBlur: 6pxSpread: -1pxOpacity: 10%

Inner (inset)

Layer 2

Horizontal: 0pxVertical: 2pxBlur: 4pxSpread: -2pxOpacity: 10%

Inner (inset)

CSS

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

Tailwind

shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]

Import an existing box-shadowPaste the value or the whole declaration; it loads into the editor.