How To Add Filter Effects to Images with CSS

CSS Filter & Backdrop-Filter

by Silvia Mazzetta Date: 28-10-2020 css css3 design webdesign filters


To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS.

CSS filters are a very attractive feature of CSS that allows you to apply certain image effects, typical of photo retouching applications, such as sepia, variations in brightness or contrast (or others) on the fly in the browser itself, without making permanent changes to an image.

The backdrop-filter property is fantastic.
To understand it is necessary to know the CSS filter property.
It is used mainly in images and allows us to perform effects such as color change, blur, work with brightness, things that are usually done with Photoshop or other image editing software.
The filter is applied to an element by passing a filter function to the filter property.

The filters you can use are:

  • blur( )
  • opacity( )
  • drop-shadow( )
  • grayscale()
  • sepia( )
  • saturate( )
  • invert( )
  • contrast( )
  • brightness( )
  • hue-rotate( )
  • url( ) — for applying SVG filters
  • custom( )
 

Blur()


Blur the content of an element. A value, which can be expressed in px, em or rem, is passed to it to determine the blur radius, so a higher value will create more blur.

 

css filters

 


Opacity( )


This function already exists in CSS, and it works the same way we apply it to some element.
It takes a value from 0 to 1, or a percentage, and determines the transparency of the image based on it.

 
img {
filter: opacity(.6);

}


Drop-shadow( )


It is similar to box-shadow, except that it allows you to shade the shape of the image and not the frame of the image.
Accepts from 2 (minimum) to 5 parameters.

Offset-x: Sets the horizontal displacement. Can be negative
Offset-y: Sets the vertical offset. Can be negative
Blur-radius: Sets the blur radius for the shadow. (Optional)
Spread-radius: sets the propagation radius. Expressed in px, rem or em (Optional)
Color: Sets the color of the shadow. (Optional)


Greyscale( )

Converts the image to grayscale. A value of 100% is completely in grayscale.

 
img {
filter: grayscale(1);
}
 


Sepia( )

Convert image to sepia.

 
img {
filter: sepia(.9);
}
 

css filters


Saturate( )

Alters the saturation of an element. 0%(0)gives a full grayscale element (with less saturation). 100%(1) gives an unchanged image.
To achieve an oversaturated image, values higher than 100% are applied.

 
img {
filter: saturate(200%);
}
 


Invert( )

Inverts the colors of an element.

 
img {
  filter: invert(2);
  }
 


Contrast( )

Adjusts the contrast of the element. A value of 0% will create a completely black image. A value of 100% will leave the image unchanged.
Just like saturation(), to increase the contrast our value should be higher than 100%.

 
img {
    filter: contrast(150%);
    }

 


Brightness( )

This works like the brightness control of a monitor, where we can play with the brightness of the image making it more or less bright, a 0% value creates a completely black image but as the value goes up to 100%, the original image gets brighter and brighter. The 100% value is the original image.

Setting something like 200% will make the image twice as bright as the original, ideal for setting up shots in low light!

 
img {
  filter: brightness(200%);
  }
 


Hue-rotate( )

It works the same as the rotate() property but instead of rotating the image, it rotates the tone of the image.

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


Url ( )

This filter allows you to apply any defined filter to an SVG file.
To use any CSS SVG filter, all you need to do is reference it using the "url" syntax

 
.url {
  filter: url(<url>)
  }

 

You can use multiple filters in one statement to create custom effects.

 
img {
  filter: cuttlefish(.5)
  contrast(1.8);
  } 

 

css filters

 

The Backdrop-filter

 

css filters

 

While the filter; property helps us to apply effects to a certain element, the backdrop-filter property allows us to apply them but to the elements below.
For the property to have any visible effect, there must be 2 elements stacked on top of each other.
This allows you to make cool effects in your designs, especially if you start combining them with animations.

#Note: You must take into account that the use of this property may have adverse effects on performance, especially when applied to a high number of elements or a large area of the page, also this property is not accepted by all browsers

With backdrop-filter you can create many effects that previously took much more work and give that different touch to your designs.
Here are some examples of codepen that you can recreate.

 
by Silvia Mazzetta Date: 28-10-2020 css css3 design webdesign filters hits : 1982  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Related Posts

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Top tools for UX design and research

This article is a compilation of the "ux tools" I have tested in recent years. I've separated the tools by categories, although I recommend you to take a look at all…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Graphic design and its impact on Web Development

In today's article we will explain the concept of graphic design, its fundamentals and what it brings into web development. Graphic design is applied to everything visual, believe or not,…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Cross cultural challenges in web design, an overview

The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration