{"id":21202,"date":"2019-02-16T11:00:55","date_gmt":"2019-02-16T17:00:55","guid":{"rendered":"https:\/\/getflywheel.com\/?p=21202"},"modified":"2025-03-13T17:10:25","modified_gmt":"2025-03-13T22:10:25","slug":"css-blend-modes","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/css-blend-modes\/","title":{"rendered":"How to Use CSS Blend Modes"},"content":{"rendered":"\n

CSS blend modes<\/a> are an easy way to add image effects right inside your browser. <\/p>\n\n\n\n

Because of this, the traditional way of editing and then saving photos from an image editing software solution is not always necessary. As designers, we\u2019ve spent countless hours adding effects to images with tools like Adobe Photoshop. As you go through this tutorial, you’ll notice that a lot of the options resemble those in Photoshop, but they can now be done with the efficiency of CSS styling.<\/p>\n\n\n\n

Will browser blend modes completely eliminate the need for image editing software? Not entirely, and certainly not quite yet. But CSS and browser support has come a long way in supporting new ways of editing images. CSS and SVG clipping and masking, blend modes, 3D Transform, and more can certainly cut back on the dependency that we have for image editing software. As browsers become more sophisticated, we will see a lot more potential and will (hopefully) spend less time in Photoshop.<\/p>\n\n\n\n

CSS Blend Modes and CSS Mix Blend Modes<\/h2>\n\n\n\n

This tutorial will cover CSS blend modes and how they are used. To start, there are a couple different options you should be aware of. One is an effect with background-blend-mode<\/code> and the other is with mix-blend-mode<\/code>.<\/p>\n\n\n\n

Using the background-blend-mode property<\/code>, you can blend the background layers (image or color) of an element. Blend modes are defined as a value and they specify how to blend or mix the colors of the background image with the color, or other background images,  behind it.<\/p>\n\n\n\n

What happens if you want to do some blending but not with background elements? Elements can be blended together using the the mix-blend-mode<\/code> property. This property describes how the blending should be between stacked HTML elements. Elements on overlapping layers will blend with those beneath it. Any images, text, borders, or headings will be influenced by this property.<\/p>\n\n\n\n

Adobe Photoshop Multiply Example<\/h2>\n\n\n\n

Taking a look at the traditional way of showing blend modes in an image editor gives us an idea of what we can accomplish with CSS blend modes. The following photo was created in Adobe Photoshop. The image is on its own background layer with a red layer above. A blend mode for the red layer was selected, which is \u201cMultiply.\u201d As you can see, there is a red overlay. To achieve this effect, Adobe Photoshop takes the colors from the layer that has \u201cMultiply\u201d applied, multiplies by the colors on the layer(s) below it, then divides them by 255 to show the result.<\/p>\n\n\n\n

\"using<\/figure>\n\n\n\n

This same effect can be achieved with CSS allowing for faster customization and easy updating.<\/p>\n\n\n\n

Basic Example of a CSS Blend Mode<\/h2>\n\n\n\n

A simple example to see how blend modes work is blending the image with a with a background-color<\/code>. First, the URL path to the image needs to be declared, then a color specified. After those have been decided, the blend mode needs to be chosen. Multiply has been selected here to show how this blend mode affects the appearance of the background-image<\/code>.<\/p>\n\n\n\n

.simple-blended {\n background-image: url(image.jpg);\n background-color: red;\n background-blend-mode: multiply;\n }<\/code><\/pre>\n\n\n\n
\"A
A div with the class of .simple-blended was created to show the multiply blend mode. On the left is the original and on the right the blend mode has been applied.<\/figcaption><\/figure>\n\n\n\n
A blend mode is the way the final color value of a pixel is calculated when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color), calculates its value, and returns a color value. The final, visible layer is the result of the blend mode calculation on every overlapping pixel between the blended layers.<\/p>\n\n\n\n
Multiply is a very popular blend mode, but there are also other available blend mode options: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. If \u201cnormal\u201d is specified, this will reset things. Instead of going through the details of each blend mode one by one, experimenting with them is the best way to determine what the final outcome will be.<\/p>\n\n\n\n
Background Blend Mode With Two Images<\/h2>\n\n\n\n
Rather than having a color overlay on an image, layering two images together can have a pretty cool effect. It\u2019s as easy as adding two background images in the CSS declaration. The next choice is to have a background color (or not). If you do not want a background color, this can be removed and the images will blend together depending on the blend mode that you choose.<\/p>\n\n\n\n
.two-image-stacked {\n background-image: url(\"image.jpg\"), url(\"image-2.jpg\");\n background-color: purple;\n background-blend-mode: lighten;\n }<\/code><\/pre>\n\n\n\n
\"The
The top row images are the separate, original images. The second row left image has a background-color: purple; added. The image on the right does not have a background color.<\/figcaption><\/figure>\n\n\n\n
Gradient on Background-blend-modes<\/h2>\n\n\n\n
Rather than using just a single color, gradients can also give some unique effects.<\/p>\n\n\n\n
.gradient-on-image {\n background:\n linear-gradient(purple 0%, red 80%),\n linear-gradient(to right, purple 0%, yellow 100%),   url(\"image.jpg\");\n background-blend-mode: screen, difference, lighten;\n }<\/pre>\n\n\n\n
\"The
The image on the left does not have a blend mode applied. The image on the right has a gradient and multiple blend modes applied.<\/figcaption><\/figure>\n\n\n\n
You\u2019ll also notice that this example has multiple background blend modes. If one blend mode isn\u2019t enough, multiple can be used.<\/p>\n\n\n\n
Working examples can be found in this Codepen<\/a>.<\/p>\n\n\n\n
Mix Blend Mode Examples<\/h2>\n\n\n\n
Up until this point, the focus has been on the background. What if other elements on the page want to take advantage of blend modes? This is no problem and the same blend mode types are available.<\/p>\n\n\n\n
Things look the same from background-blend-modes<\/code> with the exception of initial, inherit, and unset.<\/p>\n\n\n\n