Creating a strong visual impression on visitors is something every web designer aspires to do. Today, I am eager to show you a brand new set of capabilities enabling you to create a wide range of visual effects, all using CSS Filter Effects and Blend modes.
Using Filter Effects & Blend Modes, you can turn your experience as a designer into a limitless playground, allowing you to produce a broader spectrum of designs. Instead of switching back and forth between Photoshop and Elementor, you can accomplish amazing results – all on one platform.
CSS Filter Effects & Blend Modes were already available for the Call to Action widget. Now you can also use them on background overlays and with image & heading widgets.
These effects don’t just reduce the need for Photoshop. In fact, by playing with different filters & blend modes settings for normal and hover states, you can create interactive designs that would only be otherwise possible using complex CSS coding.
The new Filter Effects include scales for Blur, Brightness, Contrast and Saturation settings.
The new Blend Modes include: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color and Luminosity.
I’ll show you a handful of stylish scenes to inspire you to explore these settings further on your own.
Luminosity Blend Mode - For a Richer Look & Feel
Using the Luminosity Blend Mode, you can create a stylish design that runs consistently throughout your blog, or assign a different color per blog category.
Black & White Maps Using Saturation
Before, you had to deal with Google’s API code to create this black & white color layout for your maps. Now, achieve the same result using one sole effect: the Saturation Filter.
Filter Effects Accentuate Your Imagery
In this example, we created a nice hover effect for the image box using a combination of Blur, Brightness, Contrast, and Saturation Filters. This draws attention to the image when visitors hover over the team members.
Instantly create spectacular visuals, using Filter Effects & Blend Modes. All effects are 100% made in Elementor, no CSS or Photoshop needed.
Color Blend Mode + Gradients = Love
After adding gradient colors as the overlay to the background image, you can easily combine the gradient with the background using the Color Blend Mode. This produces a consistent color palette for the entire website’s visual assets.
Double Exposure Effects Without Photoshop
This design introduces two superimposed images. The image of the athlete is a fixed background, and the New York skyline is set on top as a background overlay, using the Screen Blend Mode. Rendering the dark colors transparent produces a double exposure effect. Top it off with a heading, apply the Multiply Blend Mode – and the result is a spectacular layout.
Colorful Compilations Using Simple Settings
Combining images and text in creative ways allows you to attain really interesting results. The effect is sophisticated, yet the process is simple. Here, a fixed black and white background, with a gradient color on top is set to the Overlay Blend Mode. The R&B heading, using the Saturation Blend Mode, creates a hinted effect, revealing the text in full only on scroll.
Create Breath-Taking Effects Using Videos
Images are not the only visuals you can blend. In this example, we devise a cool experience that can be used to showcase your logo, creating a transparent stencil using the Screen Blend Mode.
Conclusion
We’ve seen just a glimpse of the broad possibilities that CSS Blend Modes and Filter Effects offer. I invite you to play around with the various settings.
It takes a while to get familiar with all the modes, filters and how they interact, but once you get the hang of it, they will become an integral part of your toolbox. Again, don’t forget to try out these effects on hover states as well, to create even more imaginative interactions. Experiment and run wild, you’ll be surprised by what you end up with time and time again.
Did you create a beautiful landing page using these filters and blend modes? Send it over in the comments below and be listed on our Elementor Sites of the Month!
About the Author
Nicely Done!
Well done Ben?
Hi Ben,
You and your team have done a wonderful job! Make us, the users easily to use the loved Elementor!
I will try one by one to get the good skills and to have wonderfull experience.
Also is there any instrution on how to make the eCommerce site? If yes, it could be very good!
Thank you very much!
Hi Helen, we will release an e-commerce tutorial shortly after the official release.
great!!!
Oh stop it! This is all getting too good now. I’ll be designing magazines in Elementor soon at this rate! ??
Wow, This makes web design more easier and takes it to the next level.
This will make Elementor the best page builder of all time
Are you feakin kidding me. You guys rock!! You are making this designer very happy
Wow, thx for the new inspiration!
Perfect! Definitely gives unlimited design options!
Now we just wait for Parallax Background for sections and columns 🙂
Awesome!
$(this).is(‘amazing’);
Looks cool and awesome.
This looks very nice indeed. How can I get it?
Yesterday I thought: You might need a graphic designer for all your projects to create Even cooler websites and Visual freakin’. And today… you come out with that!
Are you crazy?
I mean, I’ve never ever worked with a Pagebuilder that is that Professional and client focussed like Elementor is.
The only thing I Hope is, that Elementor Stays stable and keeps being a lightweight Pagebuilder. Cause a website should look awesome, but shouldn’t load too much Ressources, right?
Christian
Awesome
From the video: “You’ll get your best results by Trial and Error”. I’ll be sure to be on the lookout for that setting. 😉
More crazy-good stuff from Ben!
OMG! The possibilities…
Love how you’ll are making progressive updates to Elementor. This is is going to make it better to designers to notch up and get wild… Cheers to your and team and you Ben !
Are these available on most modern browsers? Where can we research that?
You can use Elementor with Safari, Chrome, and Firefox. You will not be able to edit with Microsoft Internet Explorer, but you will be able to edit with the last versions of Microsoft Edge.
In any case, pages built with Elementor will show up in all the browsers.
Elementor rocks!
This looks awesome, thank you for making such exiting demos
Thanks… a lot. Elementor is growing monstrously.
I LOVE YOU SO MUCH ELEMENTOR TEAM.
Like really. Because of you I’m able to create amazing websites without coding anything. You are so awesome… keep the good work going.
Lots of Love
And once again Team Elementor hits the ball waaay out of the park … Well done guys. Once again I’m so glad to be an Elementor (Pro) user.
Thanks again for another awesome update. Elementor is the BEST plugin ever.
Teriffic … This is really WOW 🙂
Wow Ben, you are doing some amazing things! All of your time and hard work is much appreciated!!
Awesome!
OMG!! It’s awesome!!!
wow! I’m very happy for this new tool! thanks a lot!
Do you guys ever quit? It has been just one amazing announcement after another recently.
Keep up all the incredible work, you guys are awesome!
woooooow!! This is amazing… no more photoshop for beatiful results anymore! Webisites will become more alive from now on!
¿And what about IE11 and Edge?
You can use Elementor with Safari, Chrome, and Firefox. You will not be able to edit with Microsoft Internet Explorer, but you will be able to edit with recent versions of Microsoft Edge. and
In any case, pages built with Elementor will show up in all the browsers.
Nicely done! Time to start playing with the options.
Outstanding!
So nice not to have to hash things together in Photoshop.
Very Cool! Divi has some cool filters but this takes it to a new level,
Wow, I love this. Indeed, endless possibilities. Way to go guys!
Excellent addition
Wawww. Nice!
It’s amazing, congratulations for this and the future !!
I’m sooo going to impress my bosses with these!
Switching from Visual Composer to Elementor was one of my best decisions in life! Honestly. All the best, from Germany
This rocks. Like the beta test of Woocommerce builder!!
Hey! I have a problem with some browsers and this new feature :/ how can i solve it?
Удобный,удивительный инструмент.Спасибо вашей команде.
Hi Mr. Ben,
Excellent options for designing websites we are finding slow to catching up with the fast addition of features in Elementor excellent
Freaking love it! I just fell in love with Elementor a little more.
I’m so excited about these additions!
This is amazing!
Great stuff, keep up the amazing work!
Truly truly breath taking …. thank you!!
Why did mention it’s just for photographers and pros ? I think everyone would love using this. Next in store ElementorPress, the wordpress replacement ? Awesome work guys !
now now…there is no need to use slider revolution anymore, this is totally awesome!
Great News. Keep up the good work Guys!
With Regards
Daniel
Insane. Can’t wait to play around with this!
Awesome…
Hi Ben. It looks wonderful!
I wonder if you have programmed to generate some tool to make massive changes … I have an ecommerce with more than 200 products in which I would like to apply some of these filters 🙂 and talking about ecommerce … Was not a woocommerce builder coming?
This is bloody awesome!
Thanks so much, Matan! No one needs IE for editing, anyway. The main thing is display!
Does anyone know if Microsoft Edge displays these correctly? I’ve used blend modes on other platforms and Edge always disregards Multiply/Screen/Etc but Chrome, Firefox and Safari all work. Just curious.
You nailed it!
Awesome sauce.
Awesome stuff!
This is fantastic! It would be fabulous to have your demos available to download as templates – especially the blog of Luminosity Blend Mode. Thanks!
1) First Ben, much grateful thanks to you, the developers, and the support staff for creating, developing, and continuing to provide excellent support for this useful tool.
Thank you.
2) A major area for improvement is providing useable explanations.
3) This post is unreadable.
Every few sentences I must scroll down to a new page to read the next effect. I do not remember the previous effects.
Giant images, far bigger than needed to show the effect, force the next 2 sentence down to a new screen.
4) May I read a simple list of the effects?
5) In a few months this blog post will disappear off the bottom of the blog page and be lost.
No archive.
6) Nothing found when I searched docs.elementor.com on “filter effects” and on “blend modes.”
Sincerely,
a grateful user.
Loving these new updates. Although one thing I’ve noticed. The blend modes are available on backgrounds & Headings, but they aren’t available on the image widgets as mentioned.
Any word on when it will be enabled for the image element?
At the moment we do not have any plans to add it for the image element. However, you can use custom CSS to achieve the same effect.
I love it. Thanks so much!
weldone Ben
Nice one
Wow! This is absolutely amazing! My inner artist is so happy and cannot wait to test it out! ?
amazing! ?!
Nice I’m using this ezay to use
Nice feathers & easy to use, Thanks
Would love some documentation on how to get that Lumosity mode working. Can’t seem to figure it out on my own :/
Any templates or blocks to recreate this?
Guys please include more autoresponder integration like maybe HTML thing .
Wow! Wow! Now you are talking! This is really amazing! Thanks guys!
easy to use, Thanks, Thanks, Thanks
I’ve watched the ‘screen blend mode’ part of the video at least 12 times (with the runner) and it is just too fast to learn it. Where can i get a real tutorial please?