WordPress
Shadows should typically support the visual hierarchy and be used consistently – for example, Level 1 for clickable elements, Level 2 for fixed elements, and Level 3 for modal elements or similar. In code, the variables are numbered sequentially so they can be easily adjusted and extended.
Level 0
Level 1
--wp--preset--shadow--1
Level 2
--wp--preset--shadow--2
Level 3
--wp--preset--shadow--3
z-index
We have prepared a set of five custom variables in theme.json, to consistently apply z-index to elements.
| CSS Variable | z-index-Wert | Zweck |
|---|---|---|
--wp--custom--z-index--level-1 | 10 | Core elements (mostly interactive) that needs increased z-index to apply correct tap-areas, current-states etc. |
--wp--custom--z-index--level-2 | 20 | Navigation backdrop (deprecated as far as we implement popover and native backdrops) |
--wp--custom--z-index--level-3 | 30 | Sticky headers etc. |
--wp--custom--z-index--level-4 | 40 | dialogs |
--wp--custom--z-index--level-5 | 50 | Accessibility: Skip links, visible focus-states etc. |
Figma
Documentation
Shadows can give our layout a tactile quality and increase the click incentive, making it easier to tell whether elements are clickable. We can reinforce the visual hierarchy by giving sticky elements a higher shadow level, so the overall design feels more grounded — perhaps a bit more refined and premium. This depends very much on the overall design language. WordPress allows you to configure shadows as a design system. We have prepared 3 shadows. I want to briefly show where we can apply them — for example, I want to give this box a shadow.
To do that I select this box. If all boxes of this type across the entire website should get a shadow, I would configure it globally. But here I just want to demonstrate, so I click this specific box in the editor and then scroll down to the “Borders and Shadows” section — I need to click the dots there to activate shadows (it is a bit hidden). Then I have various shadow options available: Shadow 1, 2, or 3. We have 3 different levels — 3 hierarchy tiers — for example clickable, fixed, and modal. Once I select a shadow, the box gets one. If I don’t like it, I can adjust it globally.
I go into the Site Editor under Design → Editor → Styles, and under Shadows WordPress allows you to configure these shadows via the backend, just like colors and fonts. I can add custom shadows here, but for the same code-quality reasons as with colors, I would not recommend it. WordPress then generates CSS variables that are tedious to trace back to the codebase later.
Personally I would either override the existing system, or if extending it, not just click the plus button in the backend (which only stores it in the database), but instead add a Level 4 or whatever in theme.json.
If I want to adjust Level 1, I go in and see two shadow layers already prepared — we use multiple box-shadows to create the right effect.
Clicking into them, you can see all values are 0 and the color value is 0 as well, because in theme.json we used color-mix to blend the shadow better with the background color. Let me briefly show this in the Theme Editor under Shadow.
There are our shadows: Level 1, Level 2, Level 3. They reference color variables and use color-mix in OKLCH for a more harmonious look. Here I could rename them or add more shadows.
If I want to extend this, my preferred approach is: go back into the editor, into Styles, into Shadows, into Shadow 1, delete one of the shadow layers, and adjust the other — for example making it shift only downward but smaller than the element itself by using a negative spread. Then after saving, the homepage updates accordingly.