Lea Verou showcased impressive patterns that can be created with this technique, from checkerboards, to bricks, to stars.īut now that we have the background-blend-mode property, we can create even more new gradients and patterns. Functions like linear-gradient(), radial-gradient(), and the repeating-linear-gradient() and repeating-radial-gradient() varieties of the two have widespread support and more critically, a standardized syntax across browsers.īut the background property can also accept more than one gradient rendered on top of each other, with each function separated by a comma. The background property is where we can use CSS gradients. However, this article will focus on background-blend-mode, the property with the most widespread support, and how you can use it today to create eye-catching backgrounds and photo effects for your website that once were only possible in Photoshop.Ĭombining CSS gradients with background-blend-mode isolation, a lesser used property used with mix-blend-mode for keeping elements from mixing together.

mix-blend-mode, for blending elements over other elements, and lastly.background-blend-mode, for blending an element’s background images, gradients, and background colors.When you hear CSS Blend Modes being talked about, the commotion is really about three new CSS properties that have gained fairly good support in modern browsers. Likewise, the design possibilities that open up with the availability of blend modes in CSS are likely greater than you realize. If a picture is worth a thousand words, then blending two pictures together must be worth many times that. Advanced effects with CSS background blend modes Bennett Feely Follow I make websites so you don't have to.

Webkit linear gradient