1---
2title: Use Full Shadow Anatomy on Buttons
3impact: HIGH
4tags: visual, shadow, button, depth, gradient
5---
6 
7## Use Full Shadow Anatomy on Buttons
8 
9A polished button uses six layered techniques, not just a single box-shadow.
10 
111. **Outer cut shadow** — 0.5px dark box-shadow to "cut" the button into the surface
122. **Inner ambient highlight** — 1px inset box-shadow on all sides for environmental light reflections
133. **Inner top highlight** — 1px inset top highlight for the primary light source from above
144. **Layered depth shadows** — At least 3 external shadows for natural lighting
155. **Text drop-shadow** — Drop-shadow on text/icons for better contrast against the button background
166. **Subtle gradient background** — If you can tell there's a gradient, it's too much
17 
18**Incorrect (flat button):**
19 
20```css
21.button {
22  background: var(--gray-12);
23  color: var(--gray-1);
24  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
25}
26```
27 
28**Correct (full shadow anatomy):**
29 
30```css
31.button {
32  background: linear-gradient(
33    to bottom,
34    color-mix(in srgb, var(--gray-12) 100%, white 4%),
35    var(--gray-12)
36  );
37  color: var(--gray-1);
38  box-shadow:
39    0 0 0 0.5px rgba(0, 0, 0, 0.3),
40    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
41    inset 0 1px 0 rgba(255, 255, 255, 0.07),
42    0 1px 2px rgba(0, 0, 0, 0.1),
43    0 2px 4px rgba(0, 0, 0, 0.06),
44    0 4px 8px rgba(0, 0, 0, 0.03);
45  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
46}
47```
48 
49Reference: [@PixelJanitor](https://threadreaderapp.com/thread/1623358514440859649)
50