Full Site Editing
With WordPress

Estimated reading time: 1 minute

The ability to add box-shadows to blocks is a new feature in Gutenberg 14.1 and WordPress 6.1.

The first version only includes support for adding shadows with theme.json.
This means that you can not add the shadow as a style attribute in a template file or in a block pattern; that part is still under development. Contributors to Gutenberg are also exploring the best way to add a user interface for editing the shadows.

You can use the new shadow setting under the styles section in theme.json.
The setting accepts a string with a shorthand box-shadow: offset-x, offset-y, blur-radius, spread-radius, and color.

In theme.json, you write this shorthand as:

"styles": {
	"blocks" :{
		"core/post-featured-image": {
			"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
		}
	}
}

You can add shadows to both blocks and elements:

"styles": {
	"elements": {
		"button": {
			"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
		}
	}
}

And the CSS output for this example is:

.wp-element-button, .wp-block-button__link {
    box-shadow: 10px 10px 5px 0px rgb(0 0 0 / 66%);
}