Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →To add a shadow to one block, select it in the WordPress editor and look for a shadow control in its style settings. If the control is missing, your theme or block may not support it. For a reusable shadow, use theme styles and presets in theme.json; for a selector-specific effect, add CSS with box-shadow.
Choose the right way to add a shadow
| What you need | Best route | What to know |
|---|---|---|
| A shadow on one block without code | Block editor control | The selected block and theme must expose shadow support. WordPress block support documentation |
| A reusable preset or default style | theme.json |
Requires theme configuration. Presets can be defined and reused in block styles. WordPress Styles Reference and WordPress Developer Blog: Creating a shadow palette |
| A custom selector or a block without a shadow control | CSS box-shadow |
Use a CSS location available for your site, then check the result on the front end and, if needed, in the editor. WordPress Styles Reference |
Add a shadow from the block editor
- Select the block you want to style in the editor.
- Open its style controls in the settings sidebar and look for a shadow picker. The precise control placement depends on the block and editor setup.
- Choose a shadow preset and preview the block. If no shadow control is available, use a theme-level setting or CSS instead.
WordPress documents block shadow support as available since WordPress 6.5, but it is disabled by default at the block-support level. Only blocks that declare support expose a control, and the theme supplies the available presets. A selected shadow is stored in the block’s style.shadow attribute. So a missing picker does not necessarily indicate a problem with your editor; the theme or block may simply not provide it. WordPress block support documentation
Set a reusable shadow with theme.json
For a theme default, WordPress’s Styles Reference maps the shadow style property to CSS box-shadow. For example, a theme can set a default shadow for image blocks like this:
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
}
}
}
}This is theme configuration, not JSON to paste into an arbitrary WordPress settings screen. Theme authors can also define named shadow presets in settings.shadow.presets, giving each one a human-readable name, unique slug, and valid CSS box-shadow value. Block styles can then refer to the generated preset custom property. WordPress’s example defines Small, Medium, and Large presets and applies one to the Image block. WordPress Developer Blog: Creating a shadow palette
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems#1 Best Overall
When a compatible theme and editor setup are in use, site owners can manage global styles through Appearance > Editor > Styles. WordPress recommends using the styles property for standard theme styles when possible: users can manage those styles in the interface without running into specificity problems. The exact interface available depends on the site’s theme and editor setup. WordPress Styles Reference WordPress Global Settings and Styles
Add a CSS box-shadow rule
Use CSS when you need a particular selector, or when neither the editor control nor theme settings provide the effect you want. A box-shadow value specifies the horizontal offset, vertical offset, blur, spread, and color. For example, a theme stylesheet could include:
.card {
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
}Replace .card with a class that actually applies to the element you intend to style. The right place for the rule depends on your site: theme authors may add it to a stylesheet, while site owners can use a site-level Additional CSS interface if their setup provides one. WordPress also documents defining custom CSS in theme.json for a block or element, and stylesheets as a theme styling method. Do not assume the Customizer or a particular Styles submenu is available in every theme and WordPress configuration. WordPress Styles Reference WordPress Global Settings and Styles
After adding the rule, check the front end. If the shadow should also appear while editing, verify it in the editor too; theme CSS and editor styling do not always have the same reach.
Rank #3
For classic theme developers
WordPress documents a theme-development route for loading editor styles in a classic theme: enable editor styles with add_theme_support( 'editor-styles' ), then load a stylesheet with add_editor_style( 'style-editor.css' ). This is for theme authors; site owners who do not develop themes should generally use an available editor control or site-level CSS interface instead. WordPress function reference: add_editor_style()
Quick Recap
Best Value
Rank #4
Check that the shadow works where you need it
- Editor control missing: Check another supported block or use a theme style or CSS rule; shadow support is not universal.
- Theme default not appearing: Confirm the configuration targets the correct block name, such as
core/image, and that the theme is using the editedtheme.json. - CSS affects the wrong content: Narrow the selector to the intended block or class, then recheck the page.
- Visible on the site but not in the editor: Check whether the stylesheet is loaded in the editor. Classic theme developers can follow WordPress’s editor-style support method.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
