Follow us

R13: How to use CSS3 filters to create captivating images | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Perhaps you do not know, but with CSS3 you can apply changes to images without using Photoshop or any other graphic tool. In this article, in fact, you’ll discover how easy it is to apply filters to your images using only CSS. You will learn to create images in black and white, to create images with a mirror effect and additionally also discover how to apply Instagram filters, with a few simple lines of code.

So let’s get cooking!



The Divi Theme from Elegant Themes


Cooking time


This should take you around 5 minutes max.




First, create a new section, add the number of columns you prefer, and add the image module.


Next, click on the Custom CSS tab, and add the filter class you prefer, and you want to apply to your images.


This is all what you need to apply a filter to your images, but now find out which filters you can apply and their CSS code.




Copy and paste the CSS below for the effect you want to use into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section.

#Effect Greyscale

Custom Class: filter_greyscale

venezia venezia

.filter_grayscale {     -webkit-filter: grayscale(1);    filter: grayscale(1); }


#Effect Sepia

Custom Class: filter_sepia

venezia venezia

.filter_sepia {     -webkit-filter: sepia(1);     filter: sepia(1); }


#Effect Saturate

Custom Class: filter_saturate

venezia venezia

.filter_saturate {     -webkit-filter: saturate(4);     filter: saturate(4); }


#Effect Hue-rotate

Custom Class: filter_hue-rotate

venezia venezia

.filter_hue-rotate {     -webkit-filter: hue-rotate(90deg);     filter: hue-rotate(90deg); }


#Effect Invert

Custom Class: filter_invert

venezia venezia

.filter_invert {     -webkit-filter: invert(.8);     filter: invert(.8); }


#Effect Opacity

Custom Class: filter_opacity

venezia venezia

.filter_opacity {     -webkit-filter: opacity(.5);     filter: opacity(.5); }


#Effect Brightness

Custom Class: filter_brightness

venezia venezia

.filter_brightness {     -webkit-filter: brightness(.5);     filter: brightness(.5); }


#Effect Contrast

Custom Class: filter_contrast

venezia venezia

.filter_contrast {     -webkit-filter: contrast(3);     filter: contrast(3); }


#Effect Blur

Custom Class: filter_blur

venezia venezia

.filter_blur {     -webkit-filter: blur(5px);     filter: blur(5px); }


#Effect Multiple-filters

Custom Class: filter_multiple-filters

venezia venezia

.filter_multiple-filters {     -webkit-filter: contrast(1) saturate(0) sepia(.6);     filter: contrast(1.4) saturate(1.8) sepia(.6); }


Filters Instagram style:


#Effect Xpro2

Custom Class: filter_xpro2

venezia venezia

.filter_xpro2 {
  -webkit-filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
  filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);


#Effect Walden

Custom Class: filter_walden

venezia venezia

.filter_walden {
  -webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
  filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);


#Effect Valencia

Custom Class: filter_valencia

venezia venezia

.filter_valencia {
  -webkit-filter: sepia(0.15) saturate(1.5) contrast(0.9);
  filter: sepia(0.15) saturate(1.5) contrast(0.9);


#Effect Toaster

Custom Class: filter_toaster

venezia venezia

.filter_toaster {
  -webkit-filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67);
  -filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67);


#Effect Sutro

Custom Class: filter_sutro

venezia venezia

.filter_sutro {
  -webkit-filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg);
  filter: brightness(0.75) contrast(1.3) sepia(0.5) hue-rotate(-25deg);


#Effect Rise

Custom Class: filter_rise

venezia venezia

.filter_rise {
  -webkit-filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1);
  filter: saturate(1.4) sepia(0.25) hue-rotate(-15deg) contrast(0.8) brightness(1.1);


#Effect Nashville

Custom Class: filter_nashville

venezia venezia

.filter_nashville {
  -webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
  filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);


#Effect Mayfair

Custom Class: filter_mayfair

venezia venezia

.filter_mayfair {
  -webkit-filter: saturate(1.4) contrast(1.1);
  filter: saturate(1.4) contrast(1.1);


#Effect Kelvin

Custom Class: filter_kelvin

venezia venezia

.filter_kelvin {
  filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1);
  -webkit-filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1);


#Effect Hudson

Custom Class: filter_hudson

venezia venezia

.filter_hudson {
  -webkit-filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
  filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);


#Effect Earlybird

Custom Class: filter_earlybird

venezia venezia

.filter_earlybird {
  -webkit-filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);
  filter: sepia(0.4) saturate(1.6) contrast(1.1) brightness(0.9) hue-rotate(-10deg);


#Effect 1977

Custom Class: filter_1977

venezia venezia

.filter_1977 {
  -webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.2) contrast(0.8);


Bonus tricks

But I still have not finished, because I want to show you two tricks that can be useful for you :). The first allows you to create a reflection effect to your photos, but is also applicable to the text. The second tricks, however, allows you to apply all the effects shown in this tutorial, only on mouseover.


#Effect Reflection

Custom Class: effect_reflection

venezia venezia

.effect_reflection {
  -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.1)));


#Filter Hover

To create apply the filter on hover, all you have to do is add to the CSS a pseudo-class :hover. Here’s an example:

.filter_grayscale:hover { 
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
      -webkit-transition: .5s;
      transition: .5s;

In this case, the black and white effect, will only be applied on mouseover.

Note: Remember that you will need to apply the custom class to the module, as I described at the beginning of this tutorial.



This is all. In summary, we have seen how we can harness the power of CSS to manipulate images without using Photoshop and how to create a simple hover effect. Playing a little with the values and with fantasy, I’m sure you will get some fantastic effects for your images.

And that’s it. Enjoy!.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile


FABIO SARCONA | I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! You can find me at

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!