Shadow Presets

Suede includes a shadow preset that adds visual depth and separation to supported blocks. Applied thoughtfully, it helps distinguish elements like Buttons, Groups, and Images while maintaining a consistent appearance.

Using theme.json Suede accomplishes two things:

1. Disables the WordPress default shadow presets.
2. Introduces three shadow presets in Suede: Soft, Solid, Subtle

Below is the relevant code found in theme.json:

{
	"settings": {
		"shadow": {
			"defaultPresets": false,
			"presets": [
				{ "name": "Soft", "shadow": "0 0 5px var(--wp--preset--color--black-10)", "slug": "soft" },
				{ "name": "Strong", "shadow": "0 20px 40px var(--wp--preset--color--black-10)", "slug": "strong" },
				{ "name": "Solid", "shadow": "8px 8px 0 var(--wp--preset--color--accent)", "slug": "solid" },
				{ "name": "Subtle", "shadow": "12px 12px 0 var(--wp--preset--color--accent-20)", "slug": "subtle" }
			]
		}
	}
}

This code yields a set of preset variables:

--wp--preset--shadow--soft: 0 0 5px var(--wp--preset--color--black-10);
--wp--preset--shadow--strong: 0 20px 40px var(--wp--preset--color--black-10);
--wp--preset--shadow--solid: 8px 8px 0 var(--wp--preset--color--accent);
--wp--preset--shadow--subtle: 12px 12px 0 var(--wp--preset--color--accent-20);

Shadow Preset Examples

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

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

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

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