Gradient Image Overlays With CSS3

Hey, Pixels! In this week’s tutorial, I’m going to be showing you how to create a stylish gradient overlay to add to your website images using CSS3. Applying gradient overlays to your images adds a trendy pop of colour without ever having to open up Photoshop. In this tutorial, I’ll be showing you four trendy gradient overlay looks that you can use on your images for your own personal web design projects.

The HTML

The HTML in this tutorial is going to be really simple! All we’re going to use is the <div> tag and then give it a class called “color-overlay”. We’re going to be inserting the image in our CSS code.

<div class="color-overlay"></div>

The CSS3

The CSS3 is where all the magic is going to happen. First, we’re going to select the color-overlay class and set its dimensions using the width and height properties. Then, with the same class selected (.color-overlay), we’re going to use the background property and then the linear-gradient property so we can use rgba values that will add the gradient to the image. Be sure to note the “a” value in the rgba values (0.45 below)–this sets the opacity of the gradient making the image below show through. Below the linear-gradient property, we can then add the actual image.

.color-overlay {
	width: 690px;
	height: 460px;
	background: /* transparent blue overlay */
	linear-gradient( rgba(46, 185, 201, 0.45), 
	rgba(46, 185, 201, 0.45)), 
	/* inset your image below */
	url(images/nyc_building.jpg);
}

Gradient Overlay Styles

Take a look at the different gradient styles in the codes below to see some cool variations that you can use. It’s important to note that the original image is a black and white photo. Using a black and white photo to apply the gradient overlay will really bring out the effect.

Electric Cool

.color-overlay {
	width: 690px;
	height: 460px;
	background: /* color overlay */
	linear-gradient( rgba(66, 35, 241, 0.45), 
	rgba(158, 239, 225, 0.45)), 
	/* inset your image below */
	url(images/nyc_building.jpg);
}

Tropical Breeze

.color-overlay {
	width: 690px;
	height: 460px;
	background: /* transparent blue overlay */
	linear-gradient( rgba(186, 17, 146, 0.50), 
	rgba(254, 199, 108, 0.50)), 
	/* inset your image below */
	url(images/nyc_building.jpg);
}

Oceana

.color-overlay {
	width: 690px;
	height: 460px;
	background: /* transparent blue overlay */
	linear-gradient( rgba(46, 179, 214, 0.60), 
	rgba(67, 204, 152, 0.60)), 
	/* inset your image below */
	url(images/nyc_building.jpg);
}

Serenity

.color-overlay {
	width: 690px;
	height: 460px;
	background: /* transparent blue overlay */
	linear-gradient( rgba(235, 135, 101, 0.70), 
	rgba(156, 154, 254, 0.70), rgba(253, 173, 232, 0.70)), 
	/* inset your image below */
	url(images/nyc_building.jpg);
}

Show & Tell!

Feel free to share some of your own gradient image overlay creations in the comments below. Simply take a screenshot or upload a photo and show it off!