Utilities for filters and backdrop filters.
Blur
Using blur-[*], you can blur an element.
The value of the blur filter is measured in pixels (px), so blur-12 means a blur magnitude of 12 pixels.
Grayscale
Using grayscale-[*], you can convert an element's colors to shades of gray.
The value of the grayscale filter is measured in percentage (%), so grayscale-50 means a grayscale magnitude of 50%.
Brightness
Using brightness-[*], you can control an element’s brightness.
The value of the brightness filter is measured in percentage (%), so brightness-50 means a brightness magnitude of 50%.
Contrast
Using contrast-[*], you can control an element’s contrast.
The value of the contrast filter is measured in percentage (%), so contrast-50 means a contrast magnitude of 50%.
Hue Rotate
Using hue-rotate-[*], you can control an element’s hue rotation.
The value of the hue-rotate filter is measured in degrees (deg), so hue-rotate-150 means a hue rotate magnitude of 150deg.
Invert
Using invert-[*], you can control wheter an element's colors should be rendered as inverted or normal.
The value of the invert filter is measured in percentage (%), so invert-50 means an invert magnitude of 50%.
Saturate
Using saturate-[*], you can control an element's saturation.
The value of the saturate filter is measured in percentage (%), so saturate-50 means a saturatation magnitude of 50%.
Sepia
Using sepia-[*], you can control wheter an element's colors should be rendered as sepia or normal.
The value of the sepia filter is measured in percentage (%), so sepia-50 means a sepia magnitude of 50%.
Backdrop Blur
Using backdrop-blur-[*], you can control an element’s backdrop blur.
The value of the backdrop-blur filter is measured in pixels (px), so backdrop-blur-12 means a blur magnitude of 12 pixels.
Backdrop Grayscale
Using backdrop-grayscale-[*], you can convert an element's backdrop colors to shades of gray.
The value of the backdrop-grayscale filter is measured in percentage (%), so backdrop-grayscale-50 means a grayscale magnitude of 50%.
Backdrop Brightness
Using backdrop-brightness-[*], you can control an element’s backdrop brightness.
The value of the backdrop-brightness filter is measured in percentage (%), so backdrop-brightness-50 means a brightness magnitude of 50%.
Backdrop Contrast
Using backdrop-contrast-[*], you can control an element’s backdrop contrast.
The value of the backdrop-contrast filter is measured in percentage (%), so backdrop-contrast-50 means a contrast magnitude of 50%.
Backdrop Hue Rotate
Using backdrop-hue-rotate-[*], you can control an element’s backdrop hue rotation.
The value of the backdrop-hue-rotate filter is measured in degrees (deg), so backdrop-hue-rotate-150 means a hue rotate magnitude of 150deg.
Backdrop Invert
Using backdrop-invert-[*], you can control wheter an element's backdrop colors should be rendered as inverted or normal.
The value of the backdrop-invert filter is measured in percentage (%), so backdrop-invert-50 means an invert magnitude of 50%.
Backdrop Saturate
Using backdrop-saturate-[*], you can control an element's backdrop saturation.
The value of the backdrop-saturate filter is measured in percentage (%), so backdrop-saturate-50 means a saturatation magnitude of 50%.
Backdrop Sepia
Using backdrop-sepia-[*], you can control wheter an element's colors should be rendered as sepia or normal.
The value of the backdrop-sepia filter is measured in percentage (%), so backdrop-sepia-50 means a sepia magnitude of 50%.
Backdrop Opacity
Using backdrop-opacity-[*], you can control the opacity of any other backdrop filters that may have been added to an element.
The value of the backdrop-opacity filter is measured in percentage (%), so backdrop-opacity-50 means an opacity magnitude of 50%.