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 shadow preset: Faint, Light, and Solid.

Below is the relevant code found 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": "6px 6px 0 currentColor",
					"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: 6px 6px 0 currentColor;

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 any of the class names above to the Advanced > Additional CSS class option.

Box Shadow Examples

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

Box Shadow: Faint

Box Shadow: Light

Box Shadow: Solid