Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The easiest way to add a box shadow in WordPress is to select the block, open its Style settings, and choose a shadow—if your theme and that block support the control. If no shadow picker appears, use a reusable theme.json style or add a CSS box-shadow rule for the specific selector.
Choose the right method
| What you need | Best route | Important check |
|---|---|---|
| One block and no code | Block shadow control | The block and theme must expose shadow support. |
| Reusable choices or a site-wide default | theme.json styles and shadow presets |
This requires a block theme or theme-development access. |
| A selector-specific effect or an unsupported block | CSS box-shadow |
Use a CSS location provided by your theme or WordPress setup, then check both editor and front end. |
Method 1: Use the block editor’s shadow control
WordPress documents block shadow support as available since WordPress 6.5. It is disabled by default at the block-support level, so the control is conditional rather than universal.
- Open the page or post in the WordPress editor.
- Select the block you want to style.
- Open the block settings sidebar and look under Styles (the exact grouping can vary by block and theme).
- Open the Shadow control and choose one of the available presets.
- Save or update the page, then view the published page to confirm the result.
When you choose a shadow, WordPress stores it in the block’s style.shadow attribute. The available choices come from the theme’s configured presets. If the control is missing, that block may not declare shadow support, the theme may not provide presets, or the site’s editor setup may not expose the feature. Do not treat a missing picker as an editor error; use one of the methods below.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Method 2: Define a reusable shadow in theme.json
WordPress’s Styles Reference defines the shadow style property as the default box-shadow style for a block or element. A theme can set a default directly. For example, this configuration applies a subtle shadow to Image blocks:
#1 Best Overall
{
"version": 2,
"styles": {
"blocks": {
"core/image": {
"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
}
}
}
}This is theme configuration, not JSON that can be pasted into an arbitrary WordPress content field. Edit the active theme’s theme.json only when you control the theme or have a safe development workflow. A syntax error can affect the site’s global styles, so keep a backup and validate the file before deploying it.
Register named shadow presets
For reusable choices, define presets under settings.shadow.presets. Each preset needs a human-readable name, a unique slug, and a valid CSS shadow value. A theme can then reference the generated preset custom property from a block style.
{
"version": 2,
"settings": {
"shadow": {
"presets": [
{
"name": "Small",
"slug": "small",
"shadow": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
},
{
"name": "Medium",
"slug": "medium",
"shadow": "0 4px 8px 0 rgb(0 0 0 / 0.12)"
},
{
"name": "Large",
"slug": "large",
"shadow": "0 12px 24px 0 rgb(0 0 0 / 0.18)"
}
]
}
},
"styles": {
"blocks": {
"core/image": {
"shadow": "var:preset|shadow|medium"
}
}
}
}Preset syntax and editor behavior should follow the current WordPress documentation for your theme version. The Styles interface in Appearance > Editor > Styles can expose global style management when the site uses a compatible block theme and editor setup. WordPress recommends the standard styles property for ordinary theme styles because users can manage those styles through the Site Editor without fighting CSS specificity.
Method 3: Add a CSS box-shadow
CSS is the most flexible option when a block has no shadow control or you need a precise selector. A shadow value can include horizontal offset, vertical offset, blur radius, spread radius, and color.
Rank #3
.card-with-shadow {
box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.15);
}- Give the target block a class such as
card-with-shadowin its Advanced settings. - Place the rule in the CSS location your site supports, such as an available Additional CSS interface or the active theme stylesheet.
- Save the CSS and check the published page at desktop and mobile widths.
- If the shadow should also be visible while editing, verify that the editor loads the same styles; editor and front-end styles are not automatically identical in every theme.
Exact menu names differ between classic themes, block themes, WordPress versions, and host-managed configurations. Some sites show Additional CSS in the Customizer; others expose CSS through the Site Editor or theme files. Use the interface available on your installation rather than assuming a particular submenu exists.
Theme-development option for classic themes
Classic theme authors who want a stylesheet loaded in the block editor can enable editor styles and register an editor stylesheet in the theme’s PHP:
Rank #4
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );Put the corresponding box-shadow rule in style-editor.css (and in the front-end stylesheet when needed). This is a development route, not the simplest choice for a site owner who only needs one visual adjustment.
Free tools Windows power users keep installed
One-click scans. No signup required.
Make the shadow look intentional
- Use a small blur and low-opacity color for cards and images that should remain subtle.
- Increase blur and opacity carefully for overlays; excessive shadows can reduce contrast around text.
- Keep the same preset names and values across related blocks so the design remains consistent.
- Check the shadow against the actual page background. A value that is visible on white may disappear on a tinted surface.
- Inspect responsive layouts: a large shadow can look crowded when cards stack or touch the viewport edge.
Troubleshooting missing or ineffective shadows
No Shadow control appears
Confirm that the selected block supports shadows and that the active theme defines or enables the relevant support. Try a block known to expose style controls. If the picker remains unavailable, use theme.json or a class-based CSS rule.
Best Value
The CSS rule does nothing
Check that the class is attached to the intended block, that the stylesheet is loaded, and that another rule is not overriding it. Inspect the element in browser developer tools to see which box-shadow declaration wins. Avoid adding !important until you have identified the actual specificity problem.
The editor and published page look different
The editor may load a separate stylesheet or use different markup. Ensure the editor stylesheet is registered for a classic theme, or add equivalent editor styling through the block theme’s configuration. Always verify the front end after saving.
A theme update removed the style
Changes made directly to a parent theme can be overwritten by updates. Use a child theme or the theme’s supported site-level CSS mechanism when you need the rule to survive updates.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
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.
