How to Add Mix Blend Dark Mode in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor Dark Mode widget allows users to change the website color scheme using mix blend mode.
  • Users select Mix Blend from the Type dropdown under the Layout tab to apply the mix blend mode effect.
  • Excluding images from dark mode is recommended to avoid adverse visual effects when using the mix blend mode.
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.

LIVE WIDGET LINK

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 Layout tab.

Tpae dark mode mix blend mode how to add mix blend dark mode in elementor? From the plus addons for elementor

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

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

Suggested Read: How to Exclude Elements from Dark Mode in Elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the mix blend mode isn't displaying correctly in Elementor?

If the mix blend mode isn't showing as expected, ensure you've set a background color in the Background Color section. The blend mode effect will change based on this background setting. Additionally, check that you've selected the correct mix blend mode from the dropdown menu under the Layout tab.

What are the best practices for using mix blend mode in Elementor?

When using mix blend mode, it's crucial to exclude images from dark mode to avoid adverse visual effects. You can learn how to exclude elements by checking the guide on excluding elements from dark mode. This ensures a cleaner and more visually appealing design.

Does the mix blend dark mode work with all Elementor themes?

The mix blend dark mode feature is compatible with any Elementor theme, provided you have The Plus Addons for Elementor installed and activated. This flexibility allows you to enhance the visual appeal of your site regardless of the theme you choose.

Last reviewed: April 9, 2026

Related Docs