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%);
}