Hey,
How do I create a diagonal or linear gradient that is above the background image?
There is no setting, and the customized code does not appear in the front/on top of the image. I’ve tried z-index and everything. Could you guys help me?
Thanks
Hey There,
Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.
Also, give us the URL of the page so we could see your current setup.
Thanks.
Hi There,
Please check the following guide:
https://www.w3schools.com/cssref/func_linear-gradient.asp
For example, you want this to implement on a section with background image. Add gradient-overlay on the section class field. Then the following custom CSS
.gradient-overlay {
display: block;
position: relative;
overflow: hidden;
}
.gradient-overlay:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
-webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
background: -o-linear-gradient(red,yellow,blue);
background: -moz-linear-gradient(red,yellow,blue);
background: linear-gradient(red,yellow,blue);
opacity: .5;
}
See this sample: https://screencast-o-matic.com/watch/cbQuQmIvE7
Adjust the colors for your preferred gradient color and also opacity for transparency.
Hope this helps.
No, it does not work. This example you posted does not even work behind the image.
Thanks
Hi There,
In that case, please share the URL where you want to implement this and also share a screenshot of what you are trying to achieve. This will help us suggest more specific recommendation. Thank you.
See URL above.
Photo overlay, I want to have a dark overlay that starts from left and then fades to the right to transparent.
http://jesseshowalter.com/articles/css-dark-overlays/
Hello There,
Thanks for the clarification. Please make use of this code instead:
.gradient-overlay .x-bg-layer-image:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
z-index: 1;
background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65)));
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
Feel free to modify the code to fit for your site design.
Many thanks!!
How do I translate following to support all browsers:
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
Hi There,
Please take a look at this: https://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient
Hope it helps 
background: -moz-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
**background: -webkit-gradient(linear, left, right, color-stop(100%, rgba(0,0,0,1), color-stop(0%, transparent)));**
background: -webkit-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
background: -o-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
background: -ms-linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
**filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );**
Please check the bold one which I can’t veryfy myself.
Any answer?
Hi there,
It should be correct, please copy it as given by that tool. The last one is for IE.
Thanks!
No it’s not since the ** is still from top to bottom and not left to right as I the other.
Quick answer for you guys fi you´re a developer.
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&1+0,0+100;Neutral+Density */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.99) 1%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.99) 1%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.99) 1%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
Maybe this?
But the old code does not seem to apply since the 2 latest updates, not even this one.
gradient-overlay Should be in the class as always, tried with and without.
Hi there,
Hmm, please use this tool http://www.colorzilla.com/gradient-editor/ and copy the given CSS as is.
Example,
.gradient-overlay .x-bg-layer-lower-image:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
opacity: 0.8;
z-index: 999;
background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65)));
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
Thanks!