Using standard color blending functions in SASS.

  • By Grady Kuhnline
  • Last update: Oct 17, 2022
  • Comments: 5

SCSS Blend Modes

CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This is not a dynamic blend; you can't use this to blend a color with an image. This was originally intended for use with the Compass Photoshop Drop Shadow Plugin but it proved impractical to integrate.

A Note on Real CSS3 Blend Modes

Adobe has been working on a W3C spec to add blend modes to CSS3. However, CSS blend modes have extremely limited support in browsers, as of September 2013. This library is not a polyfill for those blend modes. A polyfill for dynamic blend modes will require something like SVG and JavaScript and would likely be quite complicated (or impossible).

A Note on Color Blending

The included functions are based on blend.js from the Pixastic Image Processing Library. I chose this library because JavaScript is easy enough to read and the blend modes seemed to match closely with what Photoshop offered. Additionally, a detailed explanation of Photoshop blend modes was used as a reference as well as the Wikipedia article on blend modes.

These blend mode functions are not magic. In Photoshop, the blend mode functions are applied dynamically between two layers in order to create a pixel-by-pixel blend. In CSS they can only be used to combine two solid colors together. Blend modes can be useful in times when a Photoshop design implements a blend mode on an element, like a drop shadow, that is over a mostly solid background. Choosing a dominant background color and a solid foreground color may allow for the apearance of a dynamically blended color.


Install the Ruby Gem.

gem install compass-blend-modes

Existing Compass Projects

You can include it in any existing Compass project by including the plugin in your config.rb file.

# Require any additional compass plugins here.
require 'compass-blend-modes'

New Compass Projects

You can install the plugin as part of a new Compass project.

compass create my_project -r compass-blend-modes


@import 'blend-modes';


// make sure the functions are imported
@import 'blend-modes';

// Solid background
.multiply {
	background-color: blend-multiply(#7FFFD4, #DEB887);

// RGBa background
.multiply {
	background-color: blend-multiply(rgba(#7FFFD4, 0.5), rgba(#DEB887, 0.5));

Blending Functions

All functions expect a color as the $foreground and $background colors. The colors can be any hex, rgb, rgba, hsl, or hsla color supported by Sass. Blending functions work by combining the colors from the top-most layer, the $foreground, with the lower layer, the $background.

  • blend-normal( $foreground, $background ) - Normal is used primarily to preserve the opacity after the blending has been applied to the RGB values.
  • blend-multiply( $foreground, $background )
  • blend-lighten( $foreground, $background )
  • blend-darken( $foreground, $background )
  • blend-darkercolor( $foreground, $background ) - Not found in Photoshop.
  • blend-lightercolor( $foreground, $background ) - Not found in Photoshop.
  • blend-lineardodge( $foreground, $background )
  • blend-linearburn( $foreground, $background )
  • blend-difference( $foreground, $background )
  • blend-screen( $foreground, $background )
  • blend-exclusion( $foreground, $background )
  • blend-overlay( $foreground, $background )
  • blend-softlight( $foreground, $background )
  • blend-hardlight( $foreground, $background )
  • blend-colordodge( $foreground, $background )
  • blend-colorburn( $foreground, $background )
  • blend-linearlight( $foreground, $background )
  • blend-vividlight( $foreground, $background )
  • blend-pinlight( $foreground, $background )
  • blend-hardmix( $foreground, $background )
  • blend-colorblend( $foreground, $background )
  • blend-dissolve( $foreground, $background ) - Not implemented. Dissolve treats transparency as a pixel pattern and applies a diffusion dither pattern.
  • blend-divide( $foreground, $background )
  • blend-hue( $foreground, $background )
  • blend-luminosity( $foreground, $background )
  • blend-saturation( $foreground, $background )
  • blend-subtract( $foreground, $background )

HSV Functions

These functions are used to convert between RGB, HSL and HSV color formats. The HSV color format is not natively supported by CSS or Sass. These functions were taken directly from this Gist. HSV values are used to calculate the results for the blend-colorblend, blend-hue, blend-luminosity and blend-saturation functions.

  • hsv-to-hsl( $h, [ $s: 0, $v: 0 ] ) - Converts a HSV color values into HSL color values. $h can be a list of three values representing $h, $s and $v.
  • hsl-to-hsv( $h, [ $ss: 0, $ll: 0 ] ) - Converts a HSL color values into HSV color values. $h can be a list of three values representing $h, $ss and $ll.
  • color-to-hsv( $color ) - Converts a Sass Color into a list HSV color values.
  • hsv-to-color( $h, [ $s: 0, $v: 0 ] ) - Converts a list of HSV color values into a Sass Color. $h can be a list of three values representing $h, $s and $v

Internal Functions

These functions are used to save redundant code and are not meant to be used directly. These functions perform the blending operation on a single r, g or b value.

NOTE: These functions are not intended to be used directly.

  • blend-lighten-color( $foreground, $background )
  • blend-darken-color( $foreground, $background )
  • blend-lineardodge-color( $foreground, $background )
  • blend-linearburn-color( $foreground, $background )
  • blend-screen-color( $foreground, $background )
  • blend-exclusion-color( $foreground, $background )
  • blend-overlay-color( $foreground, $background )
  • blend-softlight-color( $foreground, $background )
  • blend-hardlight-color( $foreground, $background )
  • blend-colordodge-color( $foreground, $background )
  • blend-colorburn-color( $foreground, $background )
  • blend-linearlight-color( $foreground, $background )
  • blend-vividlight-color( $foreground, $background )
  • blend-pinlight-color( $foreground, $background )
  • blend-hardmix-color( $foreground, $background )
  • blend-divide-color( $foreground, $background )



  • 1



    Sass blend mode seems interesting, but hoe can I use it? I don't know how use the blend mode. I downloaded your file, but I can't figure out how to implement the function.

    I tried something like this:

    $blend:0.2; $bm-red: 229; $bm-green: 0; $bm-blue: 142;

    @function blend-multiply ($blend, $base) { $bm-red: red($base) * red($blend) / 255; $bm-green: green($base) * green($blend) / 255; $bm-blue: blue($base) * blue($blend) / 255;

    @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($blend)), $base); }

    .blend { background: blend-multiply(rgba($bm-red, $bm-green, $bm-blue, opacity($blend)), $base); width: 100%; height: 100%; position: absolute; }

    But doesn't work

    Error: "opacity(0.2)" is not a number for `rgba').

    Need help please.



  • 2

    Foreground opacity adjustment

    Sometimes its nice to have a little more fine-tuned adjustment of color blending in Photoshop. I rarely use 100% opacity when blending so adding adjustment here would be a nice addition.

    $foreground, $background, $foreground-opacity

  • 3

    Avoiding divide by zero error

    the hsl-to-hsv() and hsv-to-hsl() function will produce NaN values if $ll or $v is set to 0. I've added logic to guard against this, so these functions always return a valid color.

  • 4

    Turn into a Compass plugin

    Turn this into a Compass plugin for easy inclusion into other projects and frameworks.

    note: I may send a pull request at some point in the next couple weeks for this, I would like to add this project as a dependency for my color-schemer project and would like to keep the source in your repo.

  • 5

    Namespace collision with $red, $green and $blue

    Thanks for the great mixins. I received errors when trying to pass in color variables named $red, $green or $blue. I replaced those internal variable names in the mixins with $bm-red, $bm-green or $bm-blue and all is well again.

    For reference the error was "Line 189 of sass/partials/_blend-mode.scss: 163.75 is not a color for `red'"