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 : 4835  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 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

Alternative tools for graphic design

There are many people today who only use the following for design purposes Canva as it is a really popular software and website and there is no denying that it…

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Open source web design tools alternatives

There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

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,…

Clicky