Add Gradient Overlay On Top Of Background Image With CSS
June 21, 2023 by Andreas Wik
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('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=654&q=80');
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
