CSS3 Gradient Image Masks

Works on Desktop Safari, iPhone, iPod Touch, iPad.

Besides using CSS3 gradients as background images, you can also use them as image masks. An image mask will reveal whatever is behind the element whose background it is applied to while simultaneously masking whatever is in its parent element. This affects both any background properties, colors, images or gradients, as well as the foreground content, whatever it may be. This allows for some interesting layered effects, but you do need to take care that your content gets masked by the mask. I’ll say that again, don’t let your content get masked by the mask. It can happen, so use masks sparingly and with care.

The notation for an image mask is fairly straightforward. First off, you can use an image, either a png or and svg graphics as a mask. The notation is like this:

-webkit-mask-box-image: url(image-mask.png) 75 stretch;

In this post we’re going to look at how to use CSS3 gradients to mask. So my little trick is to nest the element with the mask inside another element which has a background color, background image or background CSS3 gradient which the mask will reveal. In my first example I’m going to give the parent element a background color of #000 (black). The mask will therefore reveal that black to varying degrees added a patterned image burn effect to an otherwise flat foreground. So, here’s the styles for the parent:

article {
	width: 600px;
	height: 500px;
	margin: 40px auto;
	border: solid 6px gold;
	background: #000;
	border-radius: 60px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	-webkit-box-sizing: border-box;
	overflow: hidden;
	-webkit-background-clip: padding;
		-2px -2px 2px rgba(255,255,255,.75), 
		2px 2px 10px #000;
		-2px -2px 2px rgba(255,255,255,.75), 
		2px 2px 10px #000;
		-2px -2px 2px rgba(255,255,255,.75), 
		2px 2px 10px #000;

And its child element will get this style:

section { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-background-clip: padding;
	height: 100%;
	padding: 20px;
	border-radius: 54px;
	-moz-border-radius: 54px;
	-webkit-border-radius: 54px;
	background-color: #800023;
		-webkit-gradient(linear, 100% 0%, 0% 100%, 
			color-stop(0.15, #8a3726),  
			color-stop(0.15, #800023), 
			color-stop(0.50, #800023), 
			color-stop(0.50, #8a3726), 
			color-stop(0.65, #8a3726),
			color-stop(0.65, #800023));
	-webkit-background-size: 6px 6px, 100% 20px;
		-moz-linear-gradient(right top, 
			#8a3726 15%, 
			#800023 15%, 
			#800023 50%, 
			#8a3726 50%, 
			#8a3726 65%, 
			#800023 65%, 
	background-size: 6px 6px;
		-webkit-gradient(linear, left top, left bottom,
			color-stop(0.123, rgba(0,0,0,1)),
			color-stop(0.18, rgba(0,0,0,0.6)),
			color-stop(0.18, rgba(0,0,0,1)),
			color-stop(0.8, rgba(0,0,0,.5)),
			color-stop(0.8, rgba(0,0,0,0.8)),
			color-stop(0.85, rgba(0,0,0,.9)),
			color-stop(1, rgba(0,0,0,.5))); 

Notice in the code above the line beginning with “-webkit-mask-image.” What follows that property is a normal looking CSS3 gradient. Except that we’re using it as an image mask. Because we gave it no size or position, it will automatically stretch over the entire surface of the element. This is what the styles will produce:
CSS3 gradient image mask

As you can see, the image mask reveals the black background color in the shape of the gradient image mask. Now if we want to get creative, we can put something more interesting in the parent element’s background, and image or a CSS gradient pattern. Here’s an example of a CSS3 background gradient pattern being revealed by a mask:
CSS3 gradient image mask

You can see the document live or download the file as you wish.