Box Shadow

The CSS box-shadow property adds drop shadows to HTML elements, creating visual depth. By setting offsets, blur, spread radius, and color, designers control the shadow’s direction, softness, size, and shade, enhancing both Group and Image blocks.

Using theme.json, Powder accomplishes two things:

1. Disables the WordPress default shadow presets.
2. Introduces one shadow preset: Light.

Below is the relevant code found in theme.json:

{
	"settings": {
		"shadow": {
			"defaultPresets": false,
			"presets": [
				{
					"name": "Light",
					"shadow": "0 0 10px rgb(0, 0, 0, 0.1)",
					"slug": "light"
				}
			]
		}
	}
}

This code yields a set of preset variables:

--wp--preset--shadow--light: 0 0 10px rgb(0, 0, 0, 0.1);

Box Shadow Example

Here is an example of a group block with box shadow applied: