Home Web Design CSS CSS Blend Mode With HTML & JavaScript | Blend Image With Gradient

CSS Blend Mode With HTML & JavaScript | Blend Image With Gradient

July 2, 2019

12361

How we can change blending mode using HTML CSS & JS? Solution: CSS Blend Mode With HTML & JavaScript, Blending Image With Background Gradient.

Maybe you know about blending modes, like multiply, screen, overlay, color dodge, etc. These effects or modes you can see on graphic design software. CSS has this feature also, CSS has two types of blending modes mix-blend-mode & background-blend-mode. Mix blend mode is for define blending between two elements, & background blend mode defines the blending of background image & background color or gradient.

Today you will learn how we can apply and switch blend modes between the background image and background gradient. These all are CSS blending modes, but we will change modes with JavaScript. Because JavaScript can change HTML & CSS values so technically these are CSS properties.

So, Today I am sharing CSS Blend Mode With HTML and JavaScript, Blending Background Image with Gradient. CSS has 16 types of blend modes including the normal mode. This program is for changing the blending mode of the image with 16 different modes. In there JavaScript changing the CSS values for mode switch.

If you are thinking now how these CSS Blend Modes actually is, then see the preview given here below.

Preview Of Switch Blending Modes Between Background Image and Gradient

See this video preview to getting an idea about how these blending modes look like.

https://webdevtrick.com/wp-content/uploads/change-blending-modes-html-css-js.mp4?_=1

Now you can see this visually. If you like this, then get the source code of its.

CSS Blend Mode With HTML & JavaScript Source Code

Before sharing source code, let’s talk about it. For applying the blend modes I used a background image and background gradient. I have created all blending option using HTML select option tags( <select> & <option>). I gave all the values in option tag, like for overlay blend mode I put <option value="overlay">Overlay</option>.

Exactly, in the same way, I put all CSS blend modes in option tag. You can read about all blend modes from here. In CSS section, I put a background image and gradient using CSS background: url() property. I have placed all the elements like options, text, etc using CSS. Using javascript I have fetched all the elements.

When we select a blending mode then JavaScript detects it using addEventListner & changes the CSS value. For example, I put select class “blends” JavaScript fetched the value of the blend using querySelector, then its change the CSS values using style.backgroundBlendMode. That’s is the whole concept of this program, at first, I put the normal blending mode in the CSS section.

For creating this program you have to create 3 files, First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>CSS Blend Modes Switch | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="main">
  <div class="container">
    <h1><span>B</span><span>L</span><span>E</span><span>N</span><span>D</span> <span>M</span><span>O</span><span>D</span><span>E</span></h1>
    <form>
      <select id="color" class="blends">
        <option value="normal">Normal</option>
		<option value="darken">Darken</option>
		<option value="multiply">Multiply</option>
		<option value="screen">Screen</option>
        <option value="color">Color</option>
        <option value="color-burn">Color Burn</option>
        <option value="color-dodge">Color Dodge</option>
		<option value="overlay">Overlay</option>
		<option value="soft-light">Soft Light</option>
		<option value="hard-light">Dard Light</option>
        <option value="difference">Difference</option>
        <option value="exclusion">Exclusion</option>
        <option value="hue">Hue</option>
		<option value="saturation">Saturation</option>
        <option value="lighten">Lighten</option>
        <option value="luminosity">Luminosity</option>
        
        
      </select>
    </form>
  </div>
</div>
	
    <script  src="function.js"></script>
	
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Blend Modes Switch | Webdevtrick.com</title>

</head>

<body>

<form>

<option value="normal">Normal</option>

<option value="darken">Darken</option>

<option value="multiply">Multiply</option>

<option value="screen">Screen</option>

<option value="color">Color</option>

<option value="color-burn">Color Burn</option>

<option value="color-dodge">Color Dodge</option>

<option value="overlay">Overlay</option>

<option value="soft-light">Soft Light</option>

<option value="hard-light">Dard Light</option>

<option value="difference">Difference</option>

<option value="exclusion">Exclusion</option>

<option value="saturation">Saturation</option>

<option value="lighten">Lighten</option>

<option value="luminosity">Luminosity</option>

</select>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** code by webdevtrick ( https://webdevtrick.com) **/
body {
  margin: 0;
  font-family: Georgia, serif;
}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url('https://picsum.photos/id/1040/4496/3000') no-repeat, linear-gradient(to left, #FF8251, #FF731F);
  background-blend-mode: normal;
  background-size: cover;
}
h1 {
  font-size: 7rem;
  letter-spacing: -0.5rem;
  color: #FF731F;
  position: relative;
}
h1 span:nth-child(odd) {
  color: #FF8251;  
}
select {
  display: block;
  width: 170px;
  border-radius: 20px;
  height: 50px;
  font-size: 1.5rem;
  color: white;
  position: absolute;
  margin-left: 15%;
  margin-top: -3%;
  background: #FF731F;
}
select option {
   padding: 10px; 
}

/** code by webdevtrick ( https://webdevtrick.com) **/

body {

margin: 0;

font-family: Georgia, serif;

}

.main {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: url('https://picsum.photos/id/1040/4496/3000') no-repeat, linear-gradient(to left, #FF8251, #FF731F);

background-blend-mode: normal;

background-size: cover;

}

h1 {

font-size: 7rem;

letter-spacing: -0.5rem;

color: #FF731F;

position: relative;

}

h1 span:nth-child(odd) {

color: #FF8251;

}

select {

display: block;

width: 170px;

border-radius: 20px;

height: 50px;

font-size: 1.5rem;

color: white;

position: absolute;

margin-left: 15%;

margin-top: -3%;

background: #FF731F;

}

select option {

padding: 10px;

}

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com) **/
const form = document.querySelector('form');
const background = document.querySelector('.main');
const updateBlendMode = () => {
const selection = document.querySelector('.blends').value;
  background.style.backgroundBlendMode = selection;
};

form.addEventListener('submit',(e) => {
  e.preventDefault();
});

form.addEventListener('change',() => {
  updateBlendMode();
});

updateBlendMode();

/** code by webdevtrick ( https://webdevtrick.com) **/

const form = document.querySelector('form');

const background = document.querySelector('.main');

const updateBlendMode = () => {

const selection = document.querySelector('.blends').value;

background.style.backgroundBlendMode = selection;

};

form.addEventListener('submit',(e) => {

e.preventDefault();

});

form.addEventListener('change',() => {

updateBlendMode();

});

updateBlendMode();

That’s It. Now you have successfully created CSS Blend Mode With HTML and JavaScript Program. In other words, Switch Blending Modes With Background Image & Gradient. If you have any doubt or question comment down below.

Thanks For Sharing, Keep Sharing.