CSS filter function

Question 1

Explain the filter-function CSS data type?

Answer 1

The <filter-function> CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter CSS properties.

Source MDN

Question 2

Explain the blur() CSS filter-function

Answer 2

The blur() CSS function applies a Gaussian blur to the input image. Its result is a <filter-function>.

Syntax

blur(radius)

Parameters

• radius - The radius of the blur, specified as a <length>. A larger value will create more blur.

Examples:

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

Source MDN

Question 3

Explain the brightness() CSS filter-function

Answer 3

The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a <filter-function>.

Syntax

brightness(amount)

Parameters

• amount - The brightness of the result, specified as a <number> or a <percentage>. A value under 100% darkens the image, while a value over 100% brightens it.

Examples:

brightness(0%)   /* Completely black */
brightness(0.4)  /* 40% brightness */
brightness(1)    /* No effect */
brightness(200%) /* Double brightness */

Source MDN

Question 4

Explain the contrast() CSS filter-function

Answer 4

The contrast() CSS function adjusts the contrast of the input image. Its result is a <filter-function>.

Syntax

contrast(amount)

Parameters

• amount - The contrast of the result, specified as a <number> or a <percentage>. A value under 100% decreases the contrast, while a value over 100% increases it. A value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged.

Examples:

contrast(0)     /* Completely gray */
contrast(65%)   /* 65% contrast */
contrast(1)     /* No effect */
contrast(200%)  /* Double contrast */

Source MDN

Question 5

Explain the drop-shadow() CSS filter-function

Answer 5

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.

Syntax

drop-shadow(offset-x offset-y blur-radius color)

Parameters

• offset-x (required) - The horizontal offset for the shadow, specified as a <length> value. Negative values place the shadow to the left of the element.
• offset-y (required) - The vertical offset for the shadow, specified as a <length> value. Negative values place the shadow above the element.
• blur-radius (optional) - The shadow’s blur radius, specified as a <length>. The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to 0, resulting in a sharp, unblurred edge. Negative values are not allowed.
• color (optional) - The color of the shadow, specified as a <color>. If unspecified, the value of the color property is used.

Examples:

/* Black shadow with 10px blur */
drop-shadow(16px 16px 10px black);

/* Reddish shadow with 1rem blur */
drop-shadow(.5rem .5rem 1rem #e23)

Source MDN

Question 6

Explain the grayscale() CSS filter-function

Answer 6

The grayscale() CSS function converts the input image to grayscale. Its result is a <filter-function>.

Syntax

grayscale(amount)

Parameters

• amount - The amount of the conversion, specified as a <number> or a <percentage>. A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged.

Examples:

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */
grayscale(100%)  /* Completely grayscale */

Source MDN

Question 7

Explain the hue-rotate() CSS filter-function

Answer 7

The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.

Syntax

hue-rotate(angle)

Parameters

• angle - The relative change in hue of the input sample, specified as an <angle>. A value of 0deg leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value.

Examples:

hue-rotate(-90deg)  /* Same as 270deg rotation */
hue-rotate(0deg)    /* No effect */
hue-rotate(90deg)   /* 90deg rotation */
hue-rotate(.5turn)  /* 180deg rotation */
hue-rotate(405deg)  /* Same as 45deg rotation */

Source MDN

Question 8

Explain the invert() CSS filter-function

Answer 8

The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.

Syntax

invert(amount)

Parameters

• amount - The amount of the conversion, specified as a <number> or a <percentage>. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. The initial value for interpolation is 0.

Examples:

invert(0)     /* No effect */
invert(.6)    /* 60% inversion */
invert(100%)  /* Completely inverted */

Source MDN

Question 9

Explain the opacity() CSS filter-function

Answer 9

The opacity() CSS function applies transparency to the samples in the input image. Its result is a <filter-function>.

Syntax

opacity(amount)

Parameters

• amount - The amount of the conversion, specified as a <number> or a <percentage>. A value of 0% is completely transparent, while a value of 100% leaves the input unchanged. The initial value for interpolation is 1.

Examples:

opacity(0%)   /* Completely transparent */
opacity(50%)  /* 50% transparent */
opacity(1)    /* No effect */

Note: This function is similar to the more established opacity property. The difference is that with filters, some browsers provide hardware acceleration for better performance.

Source MDN

Question 10

Explain the saturate() CSS filter-function

Answer 10

The saturate() CSS function super-saturates or desaturates the input image. Its result is a <filter-function>.

Syntax

saturate(amount)

Parameters

• amount - The amount of the conversion, specified as a <number> or a <percentage>. A value of 0% is completely unsaturated, while a value of 100% leaves the input unchanged. The initial value for interpolation is 1.

Examples:

saturate(0)     /* Completely unsaturated */
saturate(.4)    /* 40% saturated */
saturate(100%)  /* No effect */
saturate(200%)  /* Double saturation */

Source MDN

Question 11

Explain the sepia() CSS filter-function

Answer 11

The sepia() CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>.

Syntax

sepia(amount)

Parameters

• amount - The amount of the conversion, specified as a <number> or a <percentage>. A value of 100% is completely sepia, while a value of 0% leaves the input unchanged. The initial value for interpolation is 0.

Examples:

sepia(0)     /* No effect */
sepia(.65)   /* 65% sepia */
sepia(100%)  /* Completely sepia */

Source MDN