{"id":6677,"date":"2026-07-12T08:20:17","date_gmt":"2026-07-12T15:20:17","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6677"},"modified":"2026-08-15T14:01:37","modified_gmt":"2026-08-15T21:01:37","slug":"shadow-presets","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/shadow-presets\/","title":{"rendered":"Shadow Presets"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using <strong>theme.json<\/strong> Suede accomplishes two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Disables the WordPress default shadow presets.<\/li>\n\n\n\n<li>Introduces three shadow presets in Suede: Soft, Solid, Subtle<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Below is the relevant code found in theme.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"shadow\": {\n\t\t\t\"defaultPresets\": false,\n\t\t\t\"presets\": &#91;\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Soft\",\n\t\t\t\t\t\"shadow\": \"0 0 5px var(--wp--preset--color--black-10)\",\n\t\t\t\t\t\"slug\": \"soft\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Solid\",\n\t\t\t\t\t\"shadow\": \"8px 8px 0 var(--wp--preset--color--accent)\",\n\t\t\t\t\t\"slug\": \"solid\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Subtle\",\n\t\t\t\t\t\"shadow\": \"12px 12px 0 var(--wp--preset--color--accent-20)\",\n\t\t\t\t\t\"slug\": \"subtle\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This code yields a set of preset variables:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--wp--preset--shadow--soft: 0 0 5px var(--wp--preset--color--black-10);\n--wp--preset--shadow--solid: 8px 8px 0 var(--wp--preset--color--accent);\n--wp--preset--shadow--subtle: 12px 12px 0 var(--wp--preset--color--accent-20);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Shadow Preset Examples<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of a group block with <strong>Soft<\/strong> shadow preset applied:<\/p>\n\n\n\n<div class=\"wp-block-group is-style-shadow-light has-global-padding is-layout-constrained wp-container-core-group-is-layout-589c4201 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);box-shadow:var(--wp--preset--shadow--soft)\">\n<p class=\"has-text-align-center wp-block-paragraph\">\u201cYou can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.\u201d<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of a group block with <strong>Solid<\/strong> shadow preset applied:<\/p>\n\n\n\n<div class=\"wp-block-group is-style-shadow-light has-border-color has-contrast-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-589c4201 wp-block-group-is-layout-constrained\" style=\"border-width:1px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);box-shadow:var(--wp--preset--shadow--solid)\">\n<p class=\"has-text-align-center wp-block-paragraph\">\u201cYou can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.\u201d<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of a group block with <strong>Subtle<\/strong> shadow preset applied:<\/p>\n\n\n\n<div class=\"wp-block-group is-style-shadow-light has-border-color has-contrast-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-589c4201 wp-block-group-is-layout-constrained\" style=\"border-width:1px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);box-shadow:var(--wp--preset--shadow--subtle)\">\n<p class=\"has-text-align-center wp-block-paragraph\">\u201cYou can design, create, and build the most wonderful place in the world. But it takes people to make the dream a reality.\u201d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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: Below is the relevant code found in theme.json: This code yields a set of preset variables: Shadow Preset Examples [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Shadow Presets \u2013 Brian Gardner","simple_seo_seo_description":"Explore the shadow presets in Suede and learn how they add subtle depth and visual emphasis to supported blocks.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6677","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6677"}],"version-history":[{"count":6,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6677\/revisions"}],"predecessor-version":[{"id":7347,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6677\/revisions\/7347"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}