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

Links
Made with
- HTML / CSS
About a code
Blendmode in Single Background Image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (Babel))
About a code
WebGL Carousel
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
mix-blend-mode
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Manipulation Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Vaporsun
Vaporwave sun palmtree.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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

Links
Made with
- HTML / CSS
About a code
Exploring Blend Modes in CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
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: -
Links
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: -
Links
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: -

Links
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: -

Links
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: -
Links
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
Links
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: -
Links
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

Links
Made with
- HTML / CSS (SCSS)
About a code
Text Image Mosaic
Uses mix-blend-mode
and CSS filter
s 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: -
Links
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: -
Links
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
Links
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: -
Links
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 filter
s and mix-blend-mode
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css
Links
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: -