In this article, I am going to show you how to achieve a multi-layered border effect and the ability to add it to nearly any block you want in your Gutenberg block editor in WordPress.
This effect could be used to make very important content stand out, or to set apart content based on certain criteria (e.g. here on WPsyed it’s used on the table of contents you see below).
- The Multi-Layered Border Effect
- HTML
- CSS
- Adding a Glow
- Advanced
- How to Add This Effect to Blocks
- Add the effect globally
- Done For You Plugin
- Install and Use
- Changing Color
- Summary
The Multi-Layered Border Effect
Here is the effect we will be building. It has several layers of colored borders in concentric circles around the container.How to Add Multi-Layered Borders to Your Blocks in WordPress
Of course, these borders can be any color, opacity, and you can have as many as you want. Could be rainbows, neon, sunny, moody… whatever fits your needs.
I simply chose this yellow to make it stand out and also show you HSLA colors in action.
HSLA colorhsla(hue, saturation, light, alpha);You’ll see this more HSLA colors in action later. But you don’t have to use HSLA color, you can use hex, RGB, or RGBA if you prefer.
HTML
Any block can have this effect, but for the purpose of teaching how this effect is created, I’ll simply use a div, and then later I will show how to apply the effect to any block you wish in the editor.
So we’re going to use this:
HTML<div class="multilayer-border">
The Multi-Layered Border Effect
</div>In the block editor, you won’t have to worry about the HTML. I am showing it here for teaching purposes only.
CSS
And now we just need to sprinkle in some styles. In this case, the box-shadow is the star of the show, with multiple shadows added.
Note: I prefer to use HSL color format, feel free to use hex or RGB if you prefer.
box-shadow syntaxbox-shadow: x-offset y-offset blur spread color;.multilayer-border {
padding:20px;margin:105px 0;
font-size:2em;
box-shadow:
0 0 0 15px hsla(46, 95%, 49%, 1),
0 0 0 30px hsla(46, 85%, 40%, .8),
0 0 0 45px hsla(46, 95%, 32%, .6),
0 0 0 60px hsla(46, 95%, 23%, .4),
0 0 15px 65px hsla(46, 100%, 65%, .2);
}Alright, immediately you should notice there is something interesting about the box-shadow style. It has 5 shadows in it, each is acting as a border.
Look closely, each has no x/y offset and no blur. That will make them an even solid around the container.
Then each is 15 pixels larger than the one above it (15px, 30px, 45px, etc.). This creates the layers.
The spread increases by 15px at a time. This will create an expanding outward appearance. It doesn’t have to be 15px and they don’t have to be even. You could vary the size to create interesting changes to this look.
Adding a Glow
You may have noticed the last shadow has a blur, is more transparent, and is just 5 pixels larger than the previous shadow.
This creates a nice glow.
Advanced
You could step it up a notch and use a CSS variable to standardize the color. For example:
CSS w/variable:root {
--wpgp-mlb-hue: 42;
}
.multilayer-border {
padding:20px;margin:105px 0;
font-size:2em;line-height:1.25em;
font-weight:700;letter-spacing:-1.5px;
box-shadow:
0 0 0 15px hsla(var(--wpgp-mlb-hue), 95%, 49%, 1),
0 0 0 30px hsla(var(--wpgp-mlb-hue), 85%, 40%, .8),
0 0 0 45px hsla(var(--wpgp-mlb-hue), 75%, 32%, .6),
0 0 0 60px hsla(var(--wpgp-mlb-hue), 65%, 23%, .4),
0 0 15px 65px hsla(var(--wpgp-mlb-hue), 100%, 65%, .2);
}I can hear you now… why? Why add a CSS variable here?
Honestly, as-is, there’s no reason. But by doing this there is the ability to target that --wpgp-mlb-hue variable with JavaScript to create interesting effects (it’s part of how I implemented the dark/light mode and color shift on this site).
It does make it a bit easier to change the color of every border at once, since you can change the hue in the variable and all other “borders” follow suit.
How to Add This Effect to Blocks
You can add it to WordPress in a really easy way using the customizer.
Add the effect globally
- At the top of your site (while logged in as admin) click Customize
- In the menu at the left choose Additional CSS
- Copy and paste just the CSS above into your Additional CSS area
- Click Save
Now every page and post in your WordPress site is “aware” of this multi-layered border design effect.
It’s time to apply it to blocks.
Click on the block you want to apply the effect to:
- In the right menu, choose Advanced
- In the Additional CSS class(es) field enter multilayer-border.
You can do this to any number of blocks you want to. After you save your updates the effect will be applied to the blocks you added the multilayer-shadow CSS class to.
Done For You Plugin
Would you prefer to simply download a plugin and then apply the effect? No problem. I put this into a free plugin — designed to be ultra-efficient and not slow your site at all.
Install and Use
- Install and activate the plugin just as you would any other.
- When editing posts, with a block selected, in the options panel at the right, open the advanced section
- Enter “wpgp-multilayer-border” into the “Additional CSS Class(es)” field
- Save your post
Changing Color
When using the plugin you won’t have easy access to the CSS created, but I did put the color into a CSS variable so you can change that easily:
- While logged in as admin, click “Customize” in the top bar
- In the left menu, go to Additional CSS
- In the additional CSS area paste this:
:root {
--wpgp-mlb-hue: 46;
}
46 is a golden yellow, but you could change it anywhere from 0-360. This color-picker can help you choose a color.
Summary
In summary, the effect is a fun way to make content stand out. The “borders” aren’t really borders, but solid shadows with no blur — where each shadow’s spread is larger than the previous — to create the layers of borders appearance.
I hope you learned something and put the effect to great use.
Take care,
