CSS Blend Modes

Have you ever wished to use Photoshop blend modes in CSS?

These filters are wonderful for ensuring a consistent visual look across your site without having to create images in Photoshop.

We used mix-blend-mode: multiply for the header images on Mountain States Legal. The left 2/3 shows the blend mode in action, and the right 1/3 shows the image without the blend mode applied.

I’m using @supportsto only add the overlay if the browser supports blend modes.

@supports( mix-blend-mode: multiply ) { .page-header__image::before { background: #B3945D; opacity: .8; mix-blend-mode: multiply; content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } }

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk