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