Few things bring more frustration to a web designer than creating a design in Photoshop and not being able to translate it to the web. If you’re like me, you probably find yourself using Photoshop blending modes on images and text to create stunning effects but getting those effects to apply on your websites can be impossible without using large images.
This can be especially difficult when it comes to styling text. Adding effects to large headers can make them engaging but using a sliced image of your lettering instead of actual text takes a toll on the SEO value and can slow down page speed.
However, with advancements in browser display capabilities we now have the option to apply our blending modes to images and text to create beautiful effects right in our CSS file. Below are some designs created in Photoshop and instructions for how to recreate the designs using mix-blend-mode.
Using the Multiply Blend Mode to Remove White Background
A favorite Photoshop trick among designers is to use the multiply blend mode to hide the white background on an image. This is great for prints or images that can be saved as a .jpg, but what if you need a .png with a transparent background? You could use any number of tools to select the white, tweak your selection, and remove the background before saving it but with mix-blend-mode you now can now hide the white background so the background that the image is overlaying will show through.
One great example of how this works is with this photo of a dog we found at pexels.com. The background is completely white which makes this perfect for placing over any background color we want. Instead of opening the image in Photoshop, selecting the white, creating a layer mask to hide it, and saving it as a .jpg I can upload the image to my website and use mix-blend-mode in my CSS file to hide the white.
To set this up, I’m going to add a gradient background image to my site.
I’ll then add my image link to the site. To remove the white, I can apply the multiply mix blend mode to my image.
I end up with the following:
I could have saved both the gradient and my dog photo with the blend mode applied in Photoshop as one image, but using mix-blend-mode allows for so many more ways to make your site dynamic. Say you want the background to be fixed and your dog to scroll with you on the page. Even as the background color changes behind the dog, the white stays hidden. This opens up a number of options for styling your background.
Using the Screen Mix-Blend-Mode on Text
Mix-blend-modes can also be applied to text. Here, I’ve got another dog photo from pexels.com.
I want to lay text over my dog image but I also want to use the screen blend mode to let the background show through. To do that, I set up my div with my dog photo set as the background.
FETCH!
I then set my mix-blend-mode in the CSS.
FETCH!
I add some additional text styles to get it to look the way I like and I’m left with a beautiful header text that retains all of it’s SEO value.
Conclusion
Because not all browsers support mix-blend-modes yet, it’s important to not rely on them without any kind of backup. But support of mix-blend-mode means a beautiful and exciting web in our near future. Examples are starting to crop up all over the web as web designers find ways to creative with all the styling options that are now available.
Below is a list of all the available mix-blend-mode
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Have a favorite blend mode you can’t wait to try on the web? Tell us about it in the comments below!