box-shadow is a CSS property that adds one or more shadows around an element’s box. A shadow can make a card appear slightly raised from the page. section 11.2.3 section 11.6
Adjust the shadow by changing these values:
- x-offset shifts the shadow right with a positive value or left with a negative value. section 11.2.3
- y-offset shifts the shadow down with a positive value or up with a negative value. section 11.2.3
- blur controls softness: 0 produces no blur, while larger values make the shadow progressively softer. section 11.2.3
- rgba alpha controls transparency from 0, completely transparent, to 1, completely opaque. section 11.2.3
- An optional spread value changes the shadow’s size relative to the element. section 11.2.3
A card shadow
Add this declaration to a card rule: box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5); The shadow moves 8 pixels right and down, uses a 4-pixel blur, and is half transparent. If the effect is not wanted, remove the box-shadow declaration or ask ChatGPT not to add a drop-shadow. section 11.2.3 section 11.5
box-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
Inspect a copyable box-shadow declaration using explicit offsets, blur, and transparency. section 11.2.3
