CSS Filter

Value

Description

Example

blur()

Blurs an element content. You pass it a value, expressed in px or em or rem that will be used to determine the blur radius.

 img {

 filter: blur(6px);

}

brightness()

Alters the brightness of an element. 0 or 0% gives a total black element. 1 or 100% gives an unchanged image Values higher than 1 or 100% make the image brighter up to reaching a total white element.

 img {

 filter: brightness(50%);

}

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.

img {

 filter: contrast(150%);

}

drop-shadow()

shows a shadow behind the element, which follows the alpha channel. This means that if you have a transparent image, you get a shadow applied to the image shape, not the image box. If the image does not have an alpha channel, the shadow will be applied to the entire image box.

It accepts a minimum of 2 parameters, up to 5: offset-x sets the horizontal offset. Can be negative. offset-y sets the vertical offset. Can be negative. blur-radius, optional, sets the blur radius for the shadow. It defaults to 0, with no blur. spread-radius, optional, sets the spread radius. Expressed in px, rem, or em color, optional, sets the color of the shadow. You can set the color without setting the spread radius or blur radius. CSS understands the value is a color and not a length value.

   img {

 filter: drop-shadow(10px 10px 5px rgb(17, 212, 170));

}

img {

 filter: drop-shadow(10px 10px rgb(17, 212, 170));

}

img {

 filter: drop-shadow(10px 10px 5px 5px rgb(237, 138, 10));

}

 grayscale()

Used to make the element have a gray color. You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely gray, and 0 or 0% mean the image is not touched, and the original colors remain.

 img {

 filter: grayscale(50%);

}

hue-rotate()

The HSL color wheel is represented in degrees. Using hue-rotate() you can rotate the color using a positive or negative rotation. The function accepts a deg value.

img {

 filter: hue-rotate(90deg);

}

invert()

Invert the colors of an element. Inverting a color means looking up the opposite color in the HSL color wheel. Just search "color wheel" in Google if you have no idea what does that means. For example, the opposite of yellow is blue, and the opposite of red is cyan. Every single color has an opposite.

You pass a number, from 0 to 1 or from 0% to 100%, that determines the amount of inversion. 1 or 100% means full inversion, and 0 or 0% means no inversion. 0.5 or 50% will always render a 50% gray color because you always end up in the middle of the wheel.

img {

 filter: inherit(50%);

}

opacity()

Takes one value from 0 to 1, or a percentage, and determines the image transparency based on it. 0, or 0%, means totally transparent. 1, or 100%, or higher, means totally visible.

img {

 filter: opacity(0.5);

}

sepia()

Used to make elements have a sepia color. You pass one value from 0 to 1, or from 0% to 100%, where 1 and 100% mean completely sepia, and 0 or 0% mean the image is not touched, and the original colors remain.

img {

 filter: sepia(50%);

}

saturate()

Alters the saturation of an element. 0 or 0% gives a total grayscale element (with less saturation). 1 or 100% gives an unchanged image Values higher than 1 or 100% give more saturation.

img {

 filter: saturate();

}

URL()

This filter allows the application of a filter defined in an SVG file. You point to the SVG file location.

img {

 filter: url(filter.svg);

}