mix blend modes

by Alexandru Gatea

HTML

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
difference
exclusion
hue
saturation
color
luminosity

SCSS

$blend-modes: (
  normal,
  multiply,
  screen,
  overlay,
  darken,
  lighten,
  color-dodge,
  color-burn,
  difference,
  exclusion,
  hue,
  saturation,
  color,
  luminosity
 );

@each $blend in $blend-modes {
  .mix-blend-#{$blend} {
    mix-blend-mode: #{$blend}
  }
  .background-blend-#{$blend} {
    background-blend-mode: #{$blend}
  }
}