Pure CSS Overlay Background

Darkening, bluring, tinting the image behind the text will make the text much easier to see !

- Powered by CSS --var
- Powered by CSS attribut : background-color 


:root {
	--img1: url('../img/sky-scrapper-1.jpg');
	--img2: url('../img/sky-scrapper-2.jpg');
}
.overlay-none {
	background-image: var(--img1);
}
.overlay-black {
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .6)), var(--img2);
}
.overlay-red {
	background-image: linear-gradient(rgba(255, 0, 0, .5), rgba(255, 0, 0, .5)), var(--img1);
}
.overlay-yellow {
	background-image: linear-gradient(rgba(255, 215, 15, .5), rgba(255, 215, 15, .5)), var(--img2);
}
.overlay-orange {
	background-image: linear-gradient(rgba(255, 165, 0, .7), rgba(255, 165, 0, .7)), var(--img1);
}
.overlay-blue {
	background-image: linear-gradient(rgba(0, 15, 200, .5), rgba(0, 15, 200, .5)), var(--img2);
}
.overlay-green {
	background-image: linear-gradient(rgba(0, 215, 15, .5), rgba(0, 215, 15, .5)), var(--img1);
}
.overlay-top-fade {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .3) 50%, rgba(255, 255, 255, .2) 100% ), var(--img2);
}
.overlay-middle-fade {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .8) 50%, rgba(0, 0, 0, .6) 70%, rgba(255, 255, 255, .2) 100% ), var(--img2);
}
.overlay-bottom-fade {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .8) 100% ), var(--img2);
}
CSS