Hello reader's in this blog we will discuss about the blend modes in CSS3, by the use of blend mode you can create some artistic look to images and text for the websites without using photoshop you can modify the images.

With CSS3 blend mode we can modify the web images into a colourful artistic effects. It can mix two or more background colors, or two images, into one new digital art piece with CSS3 property. Blend modes is a layering of two or more images to combine them into a single image of the graphical elements.

A layer’s blend mode determines how the pixels on that layer interact with the visible pixels on the layers below it. The mix-blend-mode property will modify the element's background content with blend mode. It means this property will affect any image, text, borders, headings. For example:

HTML :-

<div class="blend">
  <blockquote class="red">Attack design doldrums with stylistic souplesse</blockquote>
  <blockquote class="yellow">Fashionable figures break away from the populist peloton</blockquote>
  <blockquote class="green">Comprehensive characters for culturally correct creations</blockquote>
</div>

In the above HTML we create a parent div which have the class "blend". Under this div we put 3 blockquotes for adding colors in them.

CSS :-
 

body {
  background: url(http://unsplash.it/1499/1000);
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.blend {
  mix-blend-mode: exclusion;
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 6vw;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

In the above example the text is modified by the mix blend mode and the text colour are excluded from its background image.

Values

Some more values are used in blend mode:-

initial: This is default setting which does not set the blend mode.

inherit: Element will be inherited by the its parent element.

unset: The current blend mode is removed by unset.

<blend-mode>: this is the attribute of one of the blend modes beneath:

normal: Normal attribute applies no blend mode.

multiply: the element is multiplied by the background and replaces the background color, The color it shows after is always dark from its background.

screen: The brighter color will appear from its background color. The background is multiplied and the content then it shows the result.

overlay: This is the inverse method of the hard-light blend mode.  It multiplies or screens the content depending on the background color.

darken:  Where the content is darker its background is replaced with the content.

lighten:  Where the content is lighter the background is replaced with the content.

color-dodge: the background color brightens by this attribute .

color-burn: the content’s natural colors darkens by this to reflect the background.

hard-light: this attribute will screen or multiply it depending on the color of the content .

soft-light: this will darken or lighten the color depending on the color of the content.

difference: this subtracts the darker of the two colors from the lightest color.

exclusion: similar to differences but with lower contrast.

hue: creates a color with the hue of the content combined with the saturation and luminosity of the background.

saturation: It will create a color combined with hue and luminosity of the background.

color: creates a color with the hue and saturation of the content and the luminosity of the background.

    
luminosity: It creates the hue and saturation for the background and a color with the luminosity of the content .

This will help you to create some creative work with your content and images, which looks attractive in your site. Using blend mode in the image it gives some artistist look with CSS3 support. You can make some inventive visual effects by blending text with images.