CSS filter Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS filter property is used to apply visual effects to HTML elements, altering their appearance by manipulating attributes like brightness, contrast, blur, and more. It allows web developers to create various visual effects, such as grayscale, blur, color manipulation, and even animations. This property is particularly useful for enhancing user interface design and adding creative elements to web pages, giving designers and developers greater control over the visual aesthetics of their content.

Need some help with the filter property? If yes, then check out our online CSS Image Filter Generator to see the filter property being used.
Initial value
none
Applies to
All elements
Inherited
No
Computed value
As specified
Animatable
Yes
JavaScript syntax
object.style.filter

Interactive Demo

Syntax

filter: <filter-function> [<filter-function>]* | none

Values

none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
  • blur()Filter for blurring the image. The amount of blur is specified in pixels. If no number is specified, the default is 0.
  • brightness()The function brightness() dims or brightens images or background pictures.
  • contrast()The function contrast() decreases or increases the contrast of images or background pictures.
  • drop-shadow()The function drop-shadow() adds shadow to images. In contrast to the property box-shadow, transparent areas in the image are taken into account and the shadow is cast taking them into account.
  • grayscale()The function grayscale() turns the image into black and white.
  • hue-rotate()The hue-rotate() function applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.
  • invert()The invert() function inverts the samples in the input image. The value of amount defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
  • opacity()The opacity() function applies transparency to the samples in the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
  • saturate()The saturate() function saturates the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
  • sepia()The sepia() function converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.
  • url()A CSS link to an SVG element with a specific #id.

Example

For examples of all the filter property functions, please check out our <a target="_blank" href="../css-image-filter-generator/">css image filter generator</>

Browser Support

The following table will show you the current browser support for the CSS filter property.

Desktop
Edge Chrome Firefox Opera Safari
125335409.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5335419.3653

Last updated by CSSPortal on: 1st January 2024