Syntax
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
Values Explained
| Value | Required? | Description |
|---|
| inset | No | Makes the shadow appear inside the element instead of outside |
| offset-x | Yes | Horizontal offset. Positive = right, negative = left |
| offset-y | Yes | Vertical offset. Positive = down, negative = up |
| blur-radius | No (default 0) | The larger the value, the more blurred and spread out the shadow |
| spread-radius | No (default 0) | Positive expands, negative shrinks the shadow |
| color | No (default currentColor) | Shadow colour — use rgba() for transparency |
/* Examples */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* subtle drop shadow */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); /* dramatic shadow */
box-shadow: 0 0 0 3px #6366f1; /* glow / ring effect */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); /* colour glow */
Inset Shadows
/* Inner shadow — looks pressed/sunken */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
/* Inner highlight on top edge */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
Multiple Shadows
/* Separate multiple shadows with commas */
/* First shadow is rendered on top */
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset, /* inner highlight */
0 4px 16px rgba(0,0,0,0.4), /* main shadow */
0 0 0 1px rgba(99,102,241,0.2); /* border glow */
Design Pattern Examples
/* Card with depth */
.card { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
/* Focus ring */
input:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.4); }
/* Neumorphism */
.neu {
box-shadow:
6px 6px 12px rgba(0,0,0,0.3),
-6px -6px 12px rgba(255,255,255,0.04);
}
/* Coloured elevation (Material-style) */
.btn-primary { box-shadow: 0 4px 14px rgba(99,102,241,0.5); }