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 specific use of blocks such as Group, Image, Button, and Quote.

Using theme.json, Powder accomplishes two things:

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

Here’s the relevant code in theme.json:

{
	"settings": {
		"shadow": {
			"defaultPresets": false,
			"presets": [
				{
					"name": "Deep",
					"shadow": "0 0 50px rgb(10, 10, 10, 0.1);",
					"slug": "deep"
				},
				{
					"name": "Faint",
					"shadow": "0 0 20px rgb(10, 10, 10, 0.05);",
					"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--deep: 0 0 50px rgb(10, 10, 10, 0.1);
--wp--preset--shadow--faint: 0 0 20px rgb(10, 10, 10, 0.05);
--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’s style.css file, matching utility classes are defined:

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

/* -- Box Shadow -- */

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

.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(es) option. Here are a few examples:

Box Shadow: Deep

Box Shadow: Faint

Box Shadow: Light

Box Shadow: Solid