CSS Backdrop Filter

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

CSS filter() function

This function filters a CSS input image with a set of filter functions (like blur, grayscale or hue)

CSS Filter Effects

Method of applying filter effects using the `filter` property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes

The newest versions of `:nth-child()` and `:nth-last-child()` accept an optional `of S` clause which filters the children to only those which match the selector list `S`. For example, `:nth-child(1 of .foo)` selects the first child among the children that have the `foo` class (ignoring any non-`foo` children which precede that child). Similar to `:nth-of-type`, but for arbitrary selectors instead of only type selectors.

CSS touch-action property

touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes) or double-tap-zooming.

SVG effects for HTML

Method of using SVG transforms, filters, etc on HTML elements using either CSS or the foreignObject element

css property: backdrop-filter: none

css property: color-interpolation-filters

css property: color-interpolation-filters: auto

css property: color-interpolation-filters: linearrgb

css property: color-interpolation-filters: srgb

css property: filter

css property: filter: blur

css property: filter: brightness

css property: filter: contrast

css property: filter: drop-shadow

css property: filter: grayscale

css property: filter: hue-rotate

css property: filter: invert

css property: filter: none

css property: filter: opacity

css property: filter: saturate

css property: filter: sepia

css property: filter: on svg elements

types: `<filter-function>`

types: `<filter-function>`: `blur()`

types: `<filter-function>`: `brightness()`

types: `<filter-function>`: `contrast()`

types: `<filter-function>`: `drop-shadow()`

types: `<filter-function>`: `grayscale()`

types: `<filter-function>`: `hue-rotate()`

types: `<filter-function>`: `invert()`

types: `<filter-function>`: `opacity()`

types: `<filter-function>`: `saturate()`

types: `<filter-function>`: `sepia()`

types: `<image>`: `filter()`

background-filter