Can you overlay a transparent css3 gradient over a background image?

css gradient mask
Pineapple Sunset picture Pineapple Sunset · Nov 8, 2011 · Viewed 57.9k times · Source

I'm trying to put a css3 gradient over the top of a background image. Using the code below puts a background image on top of my gradient, but i'm trying to do it the other way around, so the gradient acts as a mask on top.

url(images/darkwood.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
url(images/darkwood.png),
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

Thanks for your help

Answer

Yoann picture Yoann · Nov 8, 2011

I have do this for one of my website, Hope it's work for you;

body {
	margin: 0;
	padding: 0;
	background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;
}

body:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

Related questions

Is there a -moz-mask CSS property, like -webkit-mask-image?

It seems -moz-mask-image is not supported in Firefox. I am attempting a foreground gradient. I can't use an image as i need the text to be selectable. Does anyone have any ideas for Firefox? This version works in chrome and …

Read More
How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More
Gradient borders

I'm trying to apply a gradient to a border, I thought it was as simple as doing this: border-color: -moz-linear-gradient(top, #555555, #111111); But this does not work. Does anyone know what is the correct way to do border gradients?

Read More