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

Silvia Mazzetta

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

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…

The concept of Model-View-Controller (MVC) explained

In software engineering, we use design patterns as reusable solutions to a commonly occurring problem, a pattern is like a template for how to solve a problem. Model-View-Controller (MVC)  is a…

The 6 Essentials for Creating a Visually Appealing Web Design

Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…

How to Pick the Best Macbook for Graphic Design Work

Graphic designers tend to do the majority of their work using a graphics tablet. However, a computer is still something you need. The idea is that you are bound to…

Parenting, pandemic and UX: Learning from design of experiences

After the quarantine, many of us have had to adapt our work and personal routines to the new remote paradigm. As a mother, I decided to share some things I've learned. We've…

Neumorphism (aka neomorphism) : new trend in UI design

This area, which arises from a basic human need, such as the urge to communicate, is constantly changing thanks to the advances of the technological era. Today, we invite you…

Introduction to BEM (Block Element Modifier)

Problems with naming CSS classes I think I might not be the only one with this experience: after finally grasping all the important concepts regarding CSS I wanted to start giving…

5 ways to improve your user experience

As a brand, UX is incredibly important when it comes to keeping your customers happy and on your site. Afterall, the longer they are on your site, the more likely…

Java Design Pattern: Strategy Pattern

One of the most popular patterns is the Strategy Pattern. It is also one of the easiest patterns. It is a member of the behavioral patterns family, it has the duty…

Layouts with Bootstrap 4: how to create a responsive web 2

Here we are with the second part of the guide: Layouts With Bootstrap 4   Horizontal alignment   To align the columns horizontally we can use justify-content-value classes, which use the justify-content property of…

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