CSS Transparent Gradient Overlay on an Image

Sometimes you may want to tint an image or add a gradient. This can obviously be done with an image editor like Photoshop, but it can also be done purely with CSS using the background property. Using CSS to do this instead of changing the image itself saves time if modifications to the image style are ever needed. It can also improve load times when the same image with different tints or gradients is being used across the site, since it can reuse the same image instead of having to load a new modified image for each instance. Let’s look at how we add a background image and a couple ways we can spruce it up.

Plain Background Image

Image with CSS Transparent Color Overlay

Here we just need to add the linear-gradient property within the background style followed by the url property we already had in place. For a solid transparent color overlay we would want to keep the linear-gradient rgba values the same for the start and end.

Image with CSS Transparent Gradient Overlay

Making the transparent gradient would use the exact same addition of the linear-gradient property, but in this case we would want the starting and ending values to vary. In the following example, I keep the color the same, but I change the alpha value which controls the transparency level. This makes the overlay color appear to fade-in down the image.

There are many other gradient variations that you can use for some cool and useful effects on your images. I personally like to use this free Colorzilla Generator, which makes creating various complex gradients really easy.