Collection of free CSS background-blend-mode code examples from Codepen.

Demo image: Exploring Blend Modes in CSS

Creator

  • alligator.io

Programming language

  • HTML / CSS

Information a code

Exploring Blend Modes in CSS

With background-blend-mode, we define the blending between the element’s background image and its background color.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: background-blend-mode example

Creator

  • ItsMeNatalie

Programming language

  • HTML / CSS (SCSS)

Information a code

background-blend-mode Example

It’s an example showcase of effects you can achieve thanks to background-blend-mode property.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Playing with background-blend-mode

Creator

  • Amelia Bellamy-Royds

Programming language

  • HTML / CSS

Information a code

Playing with background-blend-mode

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Ana Tudor

Programming language

  • HTML (Pug) / CSS (SCSS)

Information a code

Pure CSS Animated One Element Gradient Blobs

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Glen Maddern

Programming language

  • HTML / CSS / JS (Babel)

Information a code

Background Blend Mode

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Image Effects with CSS

Creator

  • Bennett Feely

Programming language

  • HTML / CSS

Information a code

Image Effects with CSS

Using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Gabi

Programming language

  • HTML / CSS / JS

Information a code

background-blend-mode

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Background Blend Mode Sample

Creator

  • Nelson

Programming language

  • HTML / CSS

Information a code

Background Blend Mode Sample

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: The Cicada background + background-blend-modes

Creator

  • yoksel

Programming language

  • HTML / CSS (SCSS)

Information a code

The Cicada background + background-blend-modes

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Rémi Lacorne

Programming language

  • HTML / CSS (SCSS)

Information a code

Full width faux-parallax divs

With some background-blend-mode thrown in.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Bennett Feely

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

background-blend-mode in Action

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js