filter
Quick Summary for filter
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Code Usage for filter
/* URL to SVG filter */ filter: url("filters.svg#filter-id");  /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);  /* Multiple filters */ filter: contrast(175%) brightness(3%);  /* Use no filter */ filter: none;  /* Global values */ filter: inherit; filter: initial; filter: revert; filter: unset;
More Details for filter

filter

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

Syntax

/* URL to SVG filter */ filter: url("filters.svg#filter-id");  /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);  /* Multiple filters */ filter: contrast(175%) brightness(3%);  /* Use no filter */ filter: none;  /* Global values */ filter: inherit; filter: initial; filter: revert; filter: unset;

With a function, use the following:

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

For a reference to an SVG <filter> element, use the following:

filter: url(file.svg#filter-element-id)

Interpolation

If both the beginning and end filters have a function list of the same length without url(), each of their filter functions is interpolated according to its specific rules. If they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules. If one filter is none, it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. Otherwise, discrete interpolation is used.

Functions

The filter property is specified as none or one or more of the functions listed below. If the parameter for any function is invalid, the function returns none. Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

When a single filter property has two or more functions it's results will be different from when two or more filter properties are separately applied with the same functions.

SVG filter

url()

Takes an URI pointing to an SVG filter, which may be embedded in an external XML file.

filter: url(resources.svg#c1)

Filter functions

blur()

The blur() function applies a Gaussian blur to the input image. The value of radius defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. The lacuna value for interpolation is 0. The parameter is specified as a CSS length, but does not accept percentage values.

filter: blur(5px) 
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">   <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">     <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>   </filter> </svg>
brightness()

The brightness() function applies a linear multiplier to the input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. The lacuna value for interpolation is 1.

filter: brightness(2) 
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">   <filter id="brightness">     <feComponentTransfer>       <feFuncR type="linear" slope="[amount]"/>       <feFuncG type="linear" slope="[amount]"/>       <feFuncB type="linear" slope="[amount]"/>     </feComponentTransfer>   </filter> </svg>
contrast()

The contrast() function adjusts the contrast of the input image. A value of 0% will create an image that is completely gray. A value of 100% leaves the input unchanged. Values of an amount over 100% are allowed, providing results with more contrast. The lacuna value for interpolation is 1.

filter: contrast(200%) 
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">   <filter id="contrast">     <feComponentTransfer>       <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>       <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>       <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>     </feComponentTransfer>   </filter> </svg>
drop-shadow()

The drop-shadow() function applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow> (defined in CSS3 Backgrounds), with the exception that the inset keyword and spread parameter are not allowed. This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the <shadow> parameter are as follows:

<offset-x> <offset-y> (required)

These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units. If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

<blur-radius> (optional)

This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).

<color> (optional)

See <color> values for possible keywords and notations. If not specified, the color used depends on the browser - it is usually the value of the <color> property, but note that Safari currently paints a transparent shadow in this case.

filter: drop-shadow(16px 16px 10px black) 
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">  <filter id="drop-shadow">     <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>     <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>     <feFlood flood-color="[color]"/>     <feComposite in2="offsetblur" operator="in"/>     <feMerge>       <feMergeNode/>       <feMergeNode in="SourceGraphic"/>     </feMerge>   </filter> </svg>
grayscale()

The grayscale() function converts the input image to grayscale. The value of amount defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

filter: grayscale(100%)
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. A value of 0deg leaves the input unchanged. The lacuna value for interpolation is 0. Though there is no maximum value; the effect of values above 360deg wraps around.

filter: hue-rotate(90deg) 
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">   <filter id="svgHueRotate">     <feColorMatrix type="hueRotate" values="[angle]"/>   </filter> </svg>
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. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

filter: invert(100%)
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. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. The lacuna value for interpolation is 1. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

filter: opacity(50%)
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. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. The lacuna value for interpolation is 1.

filter: saturate(200%)
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. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.

filter: sepia(100%)

Combining functions

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image:

filter: contrast(175%) brightness(103%)

Formal definition

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Computed valueas specified
Animation typea filter function list

Formal syntax

none | <filter-function-list>
where <filter-function-list> = [ <filter-function> | <url> ]+
where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )<grayscale()> = grayscale( <number-percentage> )<hue-rotate()> = hue-rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()> = opacity( [ <number-percentage> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <number-percentage> )
where <number-percentage> = <number> | <percentage><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

Applying filter functions

Examples of using the predefined functions are shown below. See each function for a specific example.

.mydiv {   filter: grayscale(50%); }  /* Gray all images by 50% and blur by 10px */ img {   filter: grayscale(0.5) blur(10px); }

Applying SVG filters

Examples of using the URL function with an SVG resource are as follows:

.target {   filter: url(#c1); }  .mydiv {   filter: url(commonfilters.xml#large-blur); }

Specifications

Specification
Filter Effects Module Level 2 # FilterProperty

See also

Applying SVG effects to HTML content The mask property SVG

Last modified: Jan 17, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS margin 1
CSS box-shadow 1
CSS details 20
CSS https 23
CSS text 37
CSS Padding 44
CSS padding 40
CSS iframe 50
CSS font 61
CSS git 39
CSS the 38
CSS index 35
CSS css 48
CSS select 59
CSS CSS 59
CSS blur 132
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown
Random CSS Property

column-fill

The column-fill CSS property controls how an element's contents are balanced when broken into columns.
column-fill css reference