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

Related Articles

  1. CSS backdrop-filter Examples
  2. CSS background-clip Examples

Demo image: Exploring Blend Modes in CSS

Author

  • alligator.io

Made with

  • HTML / CSS

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: background-blend-mode example

Author

  • ItsMeNatalie

Made with

  • HTML / CSS (SCSS)

About a code

background-blend-mode Example

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Playing with background-blend-mode

Author

  • Amelia Bellamy-Royds

Made with

  • HTML / CSS

About a code

Playing with background-blend-mode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Animated One Element Gradient Blobs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Glen Maddern

Made with

  • HTML / CSS / JS (Babel)

About a code

Background Blend Mode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Image Effects with CSS

Author

  • Bennett Feely

Made with

  • HTML / CSS

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Gabi

Made with

  • HTML / CSS / JS

About a code

background-blend-mode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Background Blend Mode Sample

Author

  • Nelson

Made with

  • HTML / CSS

About a code

Background Blend Mode Sample

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

Author

  • yoksel

Made with

  • HTML / CSS (SCSS)

About a code

The Cicada background + background-blend-modes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rémi Lacorne

Made with

  • HTML / CSS (SCSS)

About a code

Full width faux-parallax divs

With some background-blend-mode thrown in.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bennett Feely

Made with

  • HTML / CSS (SCSS) / JS

About a code

background-blend-mode in Action

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js