Box Shadow

The CSS box-shadow property allows designers to add drop shadows to HTML elements, creating an illusion of depth. By defining values for horizontal and vertical offsets, blur and spread radius, and color, one can control the shadow’s direction, softness, size, and shade, enhancing use of the Group and Image blocks.

Using theme.json, Powder accomplishes two things:

1. Disables the WordPress default shadow presets.
2. Introduces three distinct shadow presets: Faint, Light, Solid.

Here’s the relevant code in theme.json:

{
	"settings": {
		"shadow": {
			"defaultPresets": false,
			"presets": [
				{
					"name": "Faint",
					"shadow": "0 2px 4px rgb(10, 10, 10, 0.1)",
					"slug": "faint"
				},
				{
					"name": "Light",
					"shadow": "0 0 10px rgb(10, 10, 10, 0.1)",
					"slug": "light"
				},
				{
					"name": "Solid",
					"shadow": "8px 8px 0 rgb(10, 10, 10, 1)",
					"slug": "solid"
				}
			]
		}
	}
}

This code yields a set of preset variables:

--wp--preset--shadow--faint: 0 2px 4px rgb(10, 10, 10, 0.1);
--wp--preset--shadow--light: 0 0 10px rgb(10, 10, 10, 0.1);
--wp--preset--shadow--solid: 8px 8px 0 rgb(10, 10, 10, 1);

In the Powder style.css file, matching utility classes are defined:

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-faint {
	box-shadow: var(--wp--preset--shadow--faint);
}

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

To style blocks using these utility classes, add the class name to the Advanced > Additional CSS class option. Here are some examples:

Box Shadow: Faint

Box Shadow: Light

Box Shadow: Solid