Project: CSS Text Effects using mix-blend-mode

I wanted to see how I can design letters with patterns and colours, blending them as if you created them in a graphics editors like Photoshop or Illustrator. The key CSS property for the effect that I learned is mix-blend-mode – and it’s really quite fun!

This is actually two sets of the alphabet then overlaid. I used the mix-blend-mode: multiply so the text’s colour blends with it’s background and it’s parent’s background. See some more examples in MDN’s page about the property.

Image patterns used as background are from Subtle Patterns.

Close Menu