The scope of CSS is growing year by year. Each year CSSConf is releasing new properties list and the latest innovations in CSS collectively. It includes new modes, tags, layouts, containments, fonts, and subgrids for all sorts of technologists and developers.
On the CSSConf 2016, we have heard about the possibilities if practical blend mode that made image rending more potent in our browsers.
However, it wasn't too long ago that creating artistic effects on your web graphics could only be done by using complex image editors like GIMP or Photoshop. The ability to mix two images or two background colors to create a new digital art piece directly from CSS is straight-up remarkable.
This is precisely what blend mode does. Blend mode arguably is the feature that powered itself ahead of its competition, blend mode takes two pixels and combines them to create and image-producing some stunning effects.
Adobe photoshop didn't develop blend modes, but you don't need photoshop to style because now we can do it all dynamically using CSS3.
In this blog let's check what blend mode does at the disposal of web designers and the web development world
Blend Modes
Blend mode takes the stage in compositing operations of graphical elements. The process of layering two or more images to generate a single graphical image is known as Compositing. Blend Mode determines how pixels on each layer interact with each other visible pixels on the layers below it.
Blending occurs on the overlapping content behind the source (top element), which is known as Backdrop.
There are two CSS properties for utilizing blend modes
: Used with background images and values which work with images inside the background property of the element
Syntax:
HTML Version:
<div class="parent">
<h1 class="street">Blend Modes</h1>
</div>
CSS Version:
.parent {
background:
url("assets/model.jpg"),
url("assets/textureSteins.jpg"),
rgb(0, 255, 0);
background-blend-mode: multiply, darken,
normal;
}
.street {
mix-blend-mode: overlay;
}
In this scenario, we used three images that specify one blend mode per each if the number of modes doesn't match with the number of images the modes will repeat itself until everyone gets a mode or else they will be truncated if there are more modes than images
: Used to blend elements with parent element and the background of the own element
Syntax:
HTML version
<div class="parent">
<h1 class="child">Blend Modes</h1>
</div>
CSS Version:
.parent {
background:
url("assets/model.jpg"),
url("assets/textureSteins.jpg"),
rgb(0, 255, 0);
background-blend-mode: multiply, darken,
normal;
}
.child {
mix-blend-mode: overlay;
}
Browser Support
Browser Support for blend mode properties is improving drastically. Recent studies show that recent browser versions support the properties rather than activation or experimental features used in early browser versions.
Firefox: Supports background-blend-mode and mix-blend-mode.
Opera: Supports background-blend-mode and mix-blend-mode.
Chrome: Supports background-blend-mode and mix-blend-mode.
Safari: Supports background-blend-mode and mix-blend-mode on desktop and mobile. However, it does not yet support hue, Saturation, color, luminosity blend modes.
Internet Explorer: background-blend-mode and mix-blend-mode are not supported and listed as "under consideration" with a "low" priority.
Let's discuss different values and understand how they work.
Normal
The Value doesn't have anything to the RGB values of the bottom and top layers.
Multiply
This Value multiplies each pixel of the bottom and top layers of the RGB channels
Consider having a logo with white BG or a picture with any background, now if you want to display the object without any background you can use the multiply value
Syntax:
.multiply {
mix-blend-mode: multiply;
}
Screen
This Value takes the values of both layers by inverting their values, then multiply the values of the two layers and invert the final result once again. We can use Value to remove the black background from an image over a black ground.
Syntax:
.screen {
mix-blend-mode: screen;
}
Overlay
This Value is used to give more contrast over an image. I do it so by mixing the values of the screen and multiply in such a way that multiply function works on areas darker than 0.5 and areas with 0.5 screen function works hence the image becomes more contrasty
Syntax:
.overlay {
mix-blend-mode: overlay;
}
Hard-light
This Value also uses Screen and Multiply the same way as overlay does, but instead of affecting the top layer for the base layer, overlay affects the base layer for the top layer. So, in other words, it's a swap.
Syntax:
.hardLight {
mix-blend-mode: hard-light;
}
Soft-light
Near to overlay, this Value creates less contrast than the one done by the overlay value. In other words, you won't get pure white or pure black while using this Value.
Syntax:
.softLight {
mix-blend-mode: soft-light;
}
Color Dodge
This Value is adapted from photography wherein the revelation process; a negative is made a positive on the photographic paper. This effect avoids light in certain areas, which results in end areas to be more apparent than the others.
Syntax:
.colorDodge {
mix-blend-mode: color-dodge;
}
Color Burn
This Value takes the bottom layer, inverts its Value, then divides the result with the top segment and inverts the Value again. This effect darkens the top tier by showing the colors of the bottom layer.
Syntax:
.colorBurn {
mix-blend-mode: color-burn;
}
Darken
This Value is a combination of color that is made of the darkest colors of both the layers; in other words, this Value keeps the smallest values of both layers of the RGB channels.
Syntax:
.darken {
mix-blend-mode: darken;
}
Lighten
This Value is made from the lightest RGB values of both images or layers
Syntax:
.lighten {
mix-blend-mode: lighten;
}
Difference
This Value subtracts the lightest of the RGB Value from the smaller ones thus blending with white inverting the top layer
Syntax:
.difference {
mix-blend-mode: difference;
}
Exclusion
This Value is the same as "Difference" with less contrast.
Syntax:
.exclusion {
mix-blend-mode: exclusion;
width: 110%;
}
Hue
This Value takes the Saturation and luminance of the base color and hue of the blend color and then merges them
Syntax:
.hue {
mix-blend-mode: hue;
width: 110%;
margin: 0;
}
Saturation
Like hue, this Value merges two values of the base color with one property of the bend color. The property being Saturation
Syntax:
.saturation {
mix-blend-mode: saturation;
width: 110%;
margin: 0;
}
Color
This Value follows the same pattern as that of Hue and Saturation. However, this Value is the li\uminance of the base color and the Hue and Saturation of the blend color.
Syntax:
.color {
mix-blend-mode: color;
}
Luminosity
This Value is the opposite of color; it combines Saturation and hue of the base color and luminance of the blend color.
Syntax:
.luminosity {
mix-blend-mode: luminosity;
}
Bottom Line
Blend Mode helps us to merge RGB values from layers using for images to blend in the background property and content of the element and for items that want to merge with parent elements. Now you can add sophisticated visual effects to your web designs by CSS alone; no professional-grade image manipulation software required.
Top comments (0)