Hey Pixels! In this week’s tutorial, I’m
going to be showing you how to add a stylish gradient overlay to your images using CSS3.
Be sure to visit my blog, xopixel.com, for all the original code in this tutorial. You’ll
also find many more gradient overlays that you can use for your own web design projects
Applying gradient and color overlays to your images adds a trendy pop of colour without
ever having to open up Photoshop. The HTML in this tutorial is going to be really
simple! All we’re going to use is the
We’re going to be inserting the image in our CSS code.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 sets the opacity of the gradient making the image below show
through. Below the linear-gradient property, we can then add the actual image.
Take a look at the different gradient styles found in the related blog post on xopixel.com.
The link to the blog post is in the description box below.
Also, 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.
There you have it! You’ve created your own gradient overlays using css3! Give this video
a big thumbs up if you liked it and subscribe to xo pixel for more great videos.
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!