clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS Background Blend Mode

Imperial Advance Hero Image

CSS Background Blend Mode

The background blend mode use to blend each background layer (color and/or image).

 

Syntax -

background-blend-mode : value;

 

values

 
normal  Sets the blending mode to normal(default)
screen

Sets the blending mode to screen

multiply Set the blending mode to multiply
overlay Set the blending mode to overlay
darken Set the blending mode to darken
lighten
Set the blending mode to lighten
color-dodge
Set the blending mode to color-dodge
saturation
Set the blending mode to saturation
color
Set the blending mode to color
luminosity
Set the blending mode to luminosity

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Teknowize</title>

	<style>
		h1 {
			background-size: 75% 75%;
			background-image: linear-gradient(to right, blue 0%, red 100%), url('download.jpg');
			background-repeat: no-repeat;
			background-blend-mode: darken;
			height: 300px;
			width: 300px;
		}
	</style>
</head>

<body>
	<h1></h1>
</body>

</html>

 

Output

Background Size

CSS