Easy Elementor Dark Mode Google Maps

No extra plug-ins required! Elementor Free compatible!

Here is how to easily change that mostly white google maps, to a 'dark mode' version. For some designs, this fits way better!

Working example: Elementor Dark Mode Google Maps

Other examples

Example B

Example C

Example D

Example E

To begin with, create your Google Maps element, without margin or padding

If you need to space it, try adding margin and padding to the other elements in proximity... this just won't work well if any padding and margins are set on the Google Maps element.

Then, add this code under Advanced > Custom CSS

This is the CSS for the main example. CSS for the other examples, see below.

selector:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: white;
pointer-events: none;
mix-blend-mode: difference;
}

selector:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #C7C7C7 ;
pointer-events: none;
mix-blend-mode: difference;
}

selector:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #f6f6f6 ;
pointer-events: none;
mix-blend-mode: difference;
}

selector:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #fff ;
pointer-events: none;
mix-blend-mode: exclusion;
}

selector:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #E9E9E9 ;
pointer-events: none;
mix-blend-mode: exclusion;
}

elementor dark mode google map

.darkgmap:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: white;
pointer-events: none;
mix-blend-mode: difference;
}

Finally, enjoy your Elementor dark mode Google Maps!

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>