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

Demo image: Blendmode in Single Background Image

Author

  • Abdul Razak Shaikh

Made with

  • HTML / CSS

About a code

Blendmode in Single Background Image

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

Responsive: yes

Dependencies: -

Author

  • Francesco Michelini

Made with

  • HTML / CSS (SCSS) / JS (Babel))

About a code

WebGL Carousel

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

Responsive: yes

Dependencies: -

Demo image: mix-blend-mode

Author

  • NANOUU

Made with

  • HTML / CSS

About a code

mix-blend-mode

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

Responsive: no

Dependencies: -

Demo image: Manipulation Pure CSS

Author

  • MAHESH AMBURE

Made with

  • HTML / CSS

About a code

Manipulation Pure CSS

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

Responsive: no

Dependencies: -

Author

  • Kenneth Aamås

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Animation with mix-blend-mode

Spawning fruit labels from different images of fruits, using a mix of beautiful and confident animations; Experimenting with mix-blend-mode CSS animations.

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

Responsive: yes

Dependencies: -

Author

  • Luciano Felix

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Vaporsun

Vaporwave sun palmtree.

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

Responsive: no

Dependencies: -

Author

  • Caroline Artz

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Spotlight Cursor Text Screen

Using CSS screen mix-blend-mode and GSAP to create the cursor and text effect.

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

Responsive: yes

Dependencies: gsap.js

Demo image: Exploring Blend Modes in CSS

Author

  • alligator.io

Made with

  • HTML / CSS

About a code

Exploring Blend Modes in CSS

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

Responsive: yes

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS) / JS

About a code

Color This Sofa SVG Blend Mode Trick

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

Responsive: yes

Dependencies: jscolor.js

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS) / JS (Babel)

About a code

Image Burn Effect with mix-blend-mode and background-position

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

Responsive: yes

Dependencies: jquery.js

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Mix-blend-mode: Lluminosity & Animating border-radius on CSS

Resize the container to see how the color of the shapes and text in the block changes.

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

Responsive: yes

Dependencies: -

Author

  • Mark

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Mix Blend Mode Experiment

Mix Blend Mode experiment. A small experiment to test mix-blend-mode with white, red, blue, yellow and rainbow gradients with 16 possible values of mix-blend-mode.

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

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Tiger Uppercut

Knockout text with overlapping animated gifs and CSS mix-blend-mode.

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

Responsive: yes

Dependencies: -

Demo image: Text Mask, Comic Effect Using Blend Modes

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About a code

Text Mask, Comic Effect Using Blend Modes

Text mask text effect using mix-blend-mode.

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

Responsive: yes

Dependencies: -

Demo image: Image Mosaic Effect with CSS Grids & Blend Modes

Author

  • Dudley Storey

Made with

  • HTML / CSS (SCSS)

About a code

Image Mosaic Effect with CSS Grids & Blend Modes

Uses CSS grid spec and mix-blend-mode to create a mosaic effect from a single image.

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

Responsive: yes

Dependencies: -

Author

  • Clement Girault

Made with

  • HTML / CSS (Stylus) / JS (Babel)

About a code

Circle Cursor with mix-blend-mode

Custom cursor concept using the mix-blend-mode: difference CSS rule, reacting to colors in the background. And also handling hovers.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Daniel Gonzalez

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

UI Button with Mix-Blend-Mode

Experimenting with the CSS mix-blend-mode property.

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

Responsive: yes

Dependencies: -

Author

  • Jamie Coulter

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Video + Blend Modes = Cool Modal

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

Responsive: no

Dependencies: jquery.js

Demo image: Text Image Mosaic

Author

  • Dudley Storey

Made with

  • HTML / CSS (SCSS)

About a code

Text Image Mosaic

Uses mix-blend-mode and CSS filters to produce the impression that an image is mode of words. Text by Cornel West (image of the same).

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

Responsive: yes

Dependencies: -

Author

  • Vail Joy

Made with

  • HTML / CSS

About a code

Spotify Colorizer Effects Using CSS Blend Modes

Use pure CSS to combine mix-blend-mode and filter to achieve Spotify-style colorizer effects.

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

Responsive: yes

Dependencies: -

Author

  • Bennett Feely

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Menu with mix-blend-mode Buttons

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

Responsive: yes

Dependencies: jquery.js

Author

  • Riccardo Tartaglia

Made with

  • HTML / CSS

About a code

CSS Double Exposure Effect - Yellowstone Park

How to create a double exposure effect with only CSS mic-blend-mode.

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

Responsive: no

Dependencies: -

Author

  • Stephen Scaff

Made with

  • HTML / CSS (SCSS) / JS

About a code

Text Slice Animation and Mix Blend Mode Invert

We're taking a JPG with a white background and black outline, and inverting it using CSS filters and mix-blend-mode.

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

Responsive: yes

Dependencies: ionicons.css

Author

  • Maciej Leszczyński

Made with

  • HTML (Pug) / CSS (Sass) / JS (Babel)

About a code

Transition Effect With mix-blend-mode

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

Responsive: yes

Dependencies: -