material-ui box-shadow:rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
copied!
material-ui box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
copied!
material-ui box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
copied!
material-ui box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
copied!
material-ui box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
copied!
material-ui box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
copied!
tailwind-css box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
copied!
tailwind-css box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
copied!
tailwind-css box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
copied!
tailwind-css box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
copied!
tailwind-css box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
copied!
primer box-shadow: 0px 1px 0px 0px rgba(27, 31, 36, 0.04);
copied!
primer box-shadow: 0px 3px 6px 0px rgba(140, 149, 159, 0.15);
copied!
primer box-shadow: 0px 8px 24px 0px rgba(140, 149, 159, 0.2);
copied!
primer box-shadow: 0px 12px 28px 0px rgba(140, 149, 159, 0.3);
copied!
fluent ui box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .13), 0 1px 1px 0 rgba(0, 0, 0, .11);
copied!
fluent ui box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
copied!
fluent ui box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
copied!
fluent ui box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5);
copied!
fluent ui box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
copied!
fluent ui box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
copied!
inset box-shadow: rgb(200, 208, 231) 3.2px 3.2px 8px 0px inset, rgb(255, 255, 255) -3.2px -3.2px 8px 0px inset;
copied!
inset box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
copied!
inset box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
copied!
inset box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px 0px inset, rgba(17, 17, 26, 0.05) 0px 8px 32px 0px;
copied!
inset box-shadow: 0 20px 10px -20px rgba(0,0,0,0.45) inset;
copied!
inset box-shadow: -20px 0 10px -20px rgba(0,0,0,0.45) inset;
copied!
inset box-shadow: 0 -20px 10px -20px rgba(0,0,0,0.45) inset;
copied!
inset box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
copied!
trendy box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.04);
copied!
trendy box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
copied!
trendy box-shadow: 0px 9px 20px rgba(13, 38, 76, 0.19);
copied!
trendy box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08);
copied!
trendy box-shadow: 0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px 1px rgba(9, 30, 66, 0.13);
copied!
trendy box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(209, 213, 219,1);
copied!
trendy box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(27, 31, 35, 0.15);
copied!
trendy box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
copied!
trendy box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
copied!
trendy box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
copied!
trendy box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
copied!
trendy box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
copied!
trendy box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
copied!
trendy box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
copied!
trendy box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
copied!
trendy box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
copied!
trendy box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
copied!
trendy box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
copied!

create your own box shadow

A free tool that helps you generate box shadows for Vanilla CSS with ease.

h-offset: positive value means right side shadow.negative value means left side shadow. v-offset: positive value means below side shadow.negative value means above side shadow. blur: Optional. The blur radius. spread: Optional.A positive value increases the size of the shadow, a negative value decreases the size of the shadow. color: Optional. The color of the shadow. inset: Optional. Changes the shadow from an outer shadow (outset) to an inner shadow.

H

0 px horizontal offset

V

2 px vertical offset

B

8 px blur

S

0 px spread

C

inset