How to Add Mix Blend Dark Mode in Elementor?

Updated on March 6, 2024 by Ananda
Table Of Content

Do you want to add a mix blend mode in Elementor? The mix blend mode mixes multiple colors using the CSS background blend mode to create unique and eye-catching visual effects on your website. 

With the Dark Mode widget from The Plus Addons for Elementor, you can easily change Elementor website color scheme with mix blend mode.

To check the complete feature overview documentation of The Plus Addons for Elementor Dark Mode widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the Dark Mode widget to the template and follow the steps –

Note: To create the template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it. 

1. Select Mix Blend from the Type dropdown, under the Dark Mode tab.

Dark mode mix blend

You can select a style for the dark mode swatch from the Style dropdown.

From the Background Color section, you can add a background color to the page.

2. Then from the Mix Blend Mode dropdown, you have to select the mix blend mode for the dark mode.

Note: The blend mode effect will change if you’ve set a background color from the Background Color section.

Note: Make sure to exclude images from dark mode while using the mix blend mode, because images can have adverse visual effects.

Now, if you toggle the dark mode switcher you’ll see a unique color scheme for your page based on the selected mix blend mode option and page elements.

Dark mode mix blend demo
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website