Add Gradient Overlay On Top Of Background Image With CSS

June 21, 2023 by Andreas Wik

CSS gradient over background image

Hey, quick tip!

This is a neat little feature to bring some spice to background images. Using the CSSĀ background property you can easily insert a gradient on top of your background image.

Basically the format is as follows: background: [gradient], [image]

Like so:

background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.6)), url('');


I think the easiest way to demonstrate this is simply to just hand you a CodePen to play around with, so here you go (the first item in the top left is the original image without any overlay):

See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.

Have a gradiently beautiful day, you!


Share this article

Recommended articles