← back

Making CSS Textures with mix-blend-mode

I grew up using Photoshop, and I always liked the idea of taking certain aspects from it and applying them to my web site designs. The cool thing about CSS3 is it actually shares a few tooling concepts with Photoshop and other programs, one of those being blend modes.

Just like Photoshop, we can overlay images, or even more CSS, over DOM elements and then use the mix-blend-mode property to create some really cool textures.

In this video, I’ll go over some basic techniques to creating CSS textures using the mix-blend-mode property.

How to Create Textures in Photoshop (Youtube)

Using pseudo selectors, we can create a repeating background image and lay it under the parent element’s text. We can then use different blend modes to help the image mix into the parent’s background.
In this example, we ended up using a rusty texture to create the sun!

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: #fe9940;
  z-index: 1;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('https://i.ibb.co/2qpvRHf/rusty-grit.jpg') repeat center;
  background-size: 300px 300px;
  border-radius: 50%;
  mix-blend-mode: overlay;
  z-index: -1;
}

Once the background image or pattern is set, we set the z-index to -1 to make sure it sits underneath the content of the box element.

This is a basic example, but this method can be expanded upon to make some pretty neat designs. If you enjoy the video, consider subscribing to our Youtube channel! We’ll be dropping a video or two weekly.

Want us to to build you a badass website? We offer website design and development services. Get in touch!

this site is best viewed in portrait mode. thanks :)