Add gradient overlay section

Support
#1

Hey there,
I’d like to achieve the following look: https://prnt.sc/q1rrlw
I found two possible solutions:

  1. using two .svg for each side of the section
  2. using a css gradient

I think the gradient is the best solution as there is no need for two extra svg files

I came up with following css for the left overlay

.overlayleft{
linear-gradient(to left, #f2f3f5 , transparent);
}

Now I need your help. How can I bring the gradient to the top of my section, so it overlays the content below it?

Thanks for your help!

#2

Hi @zerotoone.de,

Thank you for writing in, adding the background directly on the Section is not going to work because you can’t put that background to the top of the content, What you can do is please enable the Section’s Background Lower Layer, but set that to transparent so we can see the gradient thru it. Then add this to your Section’s Element CSS area.

$el .x-bg {z-index:2;}
$el .x-bg-layer-lower-color {
background: linear-gradient(to left, #f2f3f5 , transparent);
}

The $el .x-bg {z-index:2;} line is the key that puts the gradient above the content.

Hope it helps,
Cheers!

#3

Ok I’ll try that later, thank you!

#4

I got it thank you very much!

#5

You’re welcome, @zerotoone.de.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.