bantros / colorizer

Experiment with CSS Blend Modes to reproduce the effects of Spotify's brand identity

Colorizer

Experiment with CSS Blend Modes to reproduce the effects of Spotify's brand identity.

Demo available at colorizer.bantros.net.

Just add the following to your stylesheet:

.colorizer {
  position: relative;
}

.colorizer::before,
.colorizer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.colorizer::before {
  z-index: 2500;
  background-color: #e6625e;
  mix-blend-mode: multiply;
}

.colorizer::after {
  z-index: 2750;
  background-color: #15a29c;
  mix-blend-mode: lighten;
}

.colorizer__image {
  filter: contrast(110%) grayscale(100%);
}

• Palette from ColorClaim by Tobias Van Schneider
• Idea from this Medium post by @pierrellev on how to achieve the same effect in Photoshop

Notes

• Not supported in Edge or Internet Explorer