Introducing Filter Effects & Blend Modes

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

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

85 Responses

  1. 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!

  2. Oh stop it! This is all getting too good now. I’ll be designing magazines in Elementor soon at this rate! ??

  3. 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

    1. 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.

  4. 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

  5. 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!

    1. 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.

  6. Switching from Visual Composer to Elementor was one of my best decisions in life! Honestly. All the best, from Germany

  7. 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 !

  8. 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?

  9. 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.

  10. This is fantastic! It would be fabulous to have your demos available to download as templates – especially the blog of Luminosity Blend Mode. Thanks!

  11. 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.

  12. 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?

    1. 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.

  13. 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?

Leave a Reply