Design box shadows visually and copy the CSS. Everything runs in your browser.
Box Shadow Syntax
box-shadow: [inset] <offset-x> <offset-y> <blur> <spread> <color>;- offset-x / offset-y — position of the shadow
- blur — how soft the edges are (0 = sharp)
- spread — how much the shadow expands (negative = shrinks)
- inset — shadow inside the element instead of outside
Popular Presets
/* Subtle */
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.12);
/* Medium */
box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1);
/* Large */
box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.15);
/* Tailwind shadow-lg */
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);