CSS blend modes are a new feature that let us blend an element’s background layer with another layer. They’re commonly used for blending a background image with a background color.
In this post, we’ll take a look at a simple blend mode mixin I recently created and used on several Sass projects.
Using blend modes
When we use the
background-blend-mode property on an element, it mixes the background image and color together based on the blend mode we set.
The simple version of the mixin accepts three arguments: the image path, background color, and blend mode:
Now we can include the
blendy mixin in any rule that needs a background blend, like this:
What about gradients?
What’s great about blend modes is that they also allow blending between images and gradients. This can create some interesting blending effects.
First, we’ll declare a variable for our blend mode gradient:
Next, we’ll need to adjust the code in our mixin to accommodate gradients. Since gradients are actually background images — not colors, let’s add an
@else condition that displays multiple background layers if we pass
$bm-gradient as the
This time, instead of a color value, let’s pass the gradient variable:
Currently, we’re limited to one blend mode gradient and we want the mixin to accept values from a variety of variables. For example, any of these:
To do that, we’ll pass both
$color and a new argument,
$grad, as optional arguments set to
null by default. And, since
multiply is the most widely used blend mode (at least for me), let’s set the default blend mode value to
Now we can simply specify the image and the blend color or gradient we want to display:
Check out the final result on CodePen:Tweet this article