Open In App

What is the use of the filter Property in CSS?

Last Updated : 01 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The Filter property in CSS is a tool used for applying visual effects to elements, altering their appearance or rendering. It allows us to apply a variety of filters, such as adjusting brightness, contrast, blurring, and more.

Note: More than one filter can be added to the HTML element which is separated by the space.

Syntax

filter: none | blur( ) | brightness( ) | contrast( ) | drop-shadow( ) |
grayscale( ) | hue-rotate( ) | invert( ) |opacity() | saturate( ) | sepia( ) |
url( );

Common Functions

  • grayscale(value): Converts the element to grayscale. The value is a percentage (0% for no grayscale, 100% for full grayscale).
  • blur(value): Applies a blur effect to the element. The value is a length, representing the radius of the blur.
  • brightness(value): Adjusts the brightness of the element. The value is a percentage (0% for black, 100% for normal brightness).
  • contrast(value): Adjusts the contrast of the element. The value is a percentage (0% for no contrast, 100% for normal contrast).
  • sepia(value): Applies a sepia tone to the element. The value is a percentage (0% for no sepia, 100% for full sepia).

Combining Functions

Multiple filter functions can be combined to achieve complex visual effects.

.element {
filter: brightness(120%) contrast(80%);
}

Uses of the filter Property

  • Allows modification of image properties like brightness, contrast, saturation, and hue.
  • Enables the application of visual effects such as blurring, grayscale, and inverting colors.
  • Can be applied to background images or elements with background properties.
  • Ideal for creating dynamic hover effects by transitioning between filtered and unfiltered states.
  • Provides a way to apply consistent visual effects across different browsers.
  • Allows the combination of multiple filters for more complex visual transformations.
  • Enhances the appearance of UI elements by applying subtle filters for a polished and modern look.

Similar Reads

PHP Filter and Filter Constant
PHP Filter is an extension that filters the data by either sanitizing or validating it. It plays a crucial role in the security of a website, especially useful when the data originates from unknown or foreign sources, like user-supplied input. For example data from an HTML form. There are mainly two types of filters which are listed below: Validati
3 min read
AngularJS filter Filter
The "filter" Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array. Syntax: {{arrayexpression | filter: expression : comparator : anyPropertyKey}} Parameter
3 min read
CSS | backdrop-filter Property
The CSS backdrop-filter property is used to apply effects to the area behind an element. This is unlike the filter property where it applies the effect to the whole element. It can be used to eliminate the use of an extra element to style the background separately. Syntax: backdrop-filter: blur() | brightness() | contrast() | drop-shadow() | graysc
7 min read
CSS Filter Property
CSS filter property is used to set the visual effect of an element. This property is mostly used in image content for adjusting the image rendering, background, border, etc. Try It: .item { border: 1px solid gray; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; border-radius: 3px; margin: auto; margin-top: 5px; max-wi
8 min read
How to use a Custom Service Inside a Filter in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of any value, function, or feature that an application
4 min read
How to use filter within controllers in AngularJS ?
In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, we can create & define the custom filters eas
4 min read
How to use map and filter simultaneously on an array using JavaScript ?
In this article, we are given an array and the task is to use the filter and map function simultaneously to the given array. JavaScript filter() methodThis method returns a new array containing the elements that pass a certain test performed on an original array. Syntax:let newArray = oldArray.filter((currentValue, index, array) { // Returns elemen
2 min read
How to use map(), filter(), and reduce() in JavaScript ?
The map(), filter(), and reduce() are the array functions that allow us to manipulate an array according to our own logic and return a new array after applying the modified operations on it. JavaScript map() MethodThe map() method in JavaScript is used to create a new array by applying a function to each element of the original array. It iterates t
3 min read
Tailwind CSS Filter
The filter class is used to set the visual effect of an element. This class is mostly used in image content. In CSS, we do that by using the CSS filter property. Tailwind CSS newly added feature filter in 2.1 version. Filter Classes: filter: This class is used to enable filters.filter-none: This class is used to remove filters. Syntax: <element
1 min read
How to add filter with Portfolio Gallery using HTML, CSS and JavaScript ?
The portfolio gallery is useful when your website contains different types of content or so many contents. With the help of a portfolio gallery, you can easily display all the contents on your front page to the user. But if user wants some specific contents then we need to attach filters on the portfolio. In this article, we will add filters using
8 min read