Suede

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": "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--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:

“You can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

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

“You can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

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

“You can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”