Gradient drop shadows for boxes

RazielKanos14. March 2020

2 min read

CSS Code

.brz-bg-content{

z-index:0;

}


.boxcgr > .brz-bg {

z-index:1;

}


.boxcgr > .brz-bg:before{

content:““;

position:absolute;

top:-5px;

right:-5px;

bottom:-5px;

left:-5px;

background:#fff;

z-index:-1;


}

.boxcgr > .brz-bg:after{

content:““;

position:absolute;

top:-5px;

right:-5px;

bottom:-5px;

left:-5px;

background:#fff;

z-index:-2;

filter:blur(40px);


}

.boxcgr:nth-child(1) > .brz-bg:before, .boxcgr:nth-child(1) > .brz-bg:after{

background: rgb(34,193,195);

background: linear-gradient(235deg, rgb(150,255,0,1)0%, rgb(255,255,255,1)50%, rgb(253,187,45,1)100%);

}

.boxcgr:nth-child(2) > .brz-bg:before, .boxcgr:nth-child(2) > .brz-bg:after{

background: rgb(34,193,195);

background: linear-gradient(235deg, rgb(255,0,0,1)0%, rgb(255,255,255,1)50%, rgb(0,0,255,1)100%);

}

.boxcgr:nth-child(3) > .brz-bg:before, .boxcgr:nth-child(3) > .brz-bg:after{

background: rgb(34,193,195);

background: linear-gradient(235deg, rgb(0,255,165,1)0%, rgb(255,255,255,1)50%, rgb(182,0,255,1)100%);

}

This is the CSS code that needs to be copied into the CSS section of your theme or into brizy cloud.

In WordPress you can alternatively use this plugin to get a better overview.

Tutorial

Step 1

Copy the CSS code into your WordPress Theme CSS section, or into the Brizy Clouds CSS Settings.

Step 2

Create a row of at least 3 columns.

Step 3

Enter "boxcgr" as CSS class for each of the columns. You click on the blue arrow next to the container, and then go to Settings -> more settings

Thats it, you are done…

How to change the colors?

Simply change the color code in the RGB area in the lower 3 sections of the CSS code

How to use the feature with more columns?

Just make a copy of the last segment in the CSS code and replace nth-child(3) with nth-child(4) or nth-child(5) and so on.

Still questions?

Just throw me a line here, and I will see if I can help you 🙂

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Hey!

Would you like to know what I am currently working on?

We use cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more