Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Filters

JSX style props for applying various filters to elements.

Filter

Use the filter prop to apply visual effects like blur or color shift to an element.

<Box filter="blur(5px)" />
<Box filter="grayscale(80%)" />
PropCSS PropertyToken Category
filterfilter-

Blur

Use the blur prop to apply a blur effect to an element. The requirement for this prop is to set the filter prop to auto.

// hardcoded value
<Box filter="auto" blur="5px" />

// token value
<Box filter="auto" blur="sm" />
PropCSS PropertyToken Category
blur--blurblurs

Contrast

Use the contrast prop to apply a contrast effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" contrast="0.3" />
PropCSS PropertyToken Category
contrast--contrast-

Drop Shadow

Use the dropShadow prop to apply a drop shadow effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" dropShadow="0px 0px 10px rgba(0, 0, 0, 0.5)" />
PropCSS PropertyToken Category
dropShadow--drop-shadow-

Grayscale

Use the grayscale prop to apply a grayscale effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" grayscale="64%" />
PropCSS PropertyToken Category
grayscale--grayscale-

Hue Rotate

Use the hueRotate prop to apply a hue rotate effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" hueRotate="30deg" />
PropCSS PropertyToken Category
hueRotate--hue-rotate-

Invert

Use the invert prop to apply an invert effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" invert="40%" />
PropCSS PropertyToken Category
invert--invert-

Saturate

Use the saturate prop to apply a saturate effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" saturate="0.4" />
PropCSS PropertyToken Category
saturate--saturate-

Sepia

Use the sepia prop to apply a sepia effect to an element. The requirement for this prop is to use the filter prop and set it to auto.

<Box filter="auto" sepia="0.4" />
PropCSS PropertyToken Category
sepia--sepia-

Backdrop Filter

Use the backdropFilter prop to apply visual effects like blur or color shift to the area behind an element. This creates a translucent effect.

<Box backdropFilter="blur(5px)" />
<Box backdropFilter="grayscale(80%)" />
PropCSS PropertyToken Category
backdropFilterbackdrop-filter-

Backdrop Blur

Use the backdropBlur prop to apply a blur effect to the area behind an element. The requirement for this prop is to set the backdropFilter prop to auto.

// hardcoded value
<Box backdropFilter="auto" backdropBlur="5px" />

// token value
<Box backdropFilter="auto" backdropBlur="sm" />
PropCSS PropertyToken Category
backdropBlur--backdrop-blurblurs

Backdrop Contrast

Use the backdropContrast prop to apply a contrast effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropContrast="0.3" />
PropCSS PropertyToken Category
backdropContrast--backdrop-contrast-

Backdrop Grayscale

Use the backdropGrayscale prop to apply a grayscale effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropGrayscale="64%" />
PropCSS PropertyToken Category
backdropGrayscale--backdrop-grayscale-

Backdrop Hue Rotate

Use the backdropHueRotate prop to apply a hue rotate effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropHueRotate="30deg" />
PropCSS PropertyToken Category
backdropHueRotate--backdrop-hue-rotate-

Backdrop Invert

Use the backdropInvert prop to apply an invert effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropInvert="40%" />
PropCSS PropertyToken Category
backdropInvert--backdrop-invert-

Backdrop Opacity

Use the backdropOpacity prop to apply an opacity effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropOpacity="0.4" />
PropCSS PropertyToken Category
backdropOpacity--backdrop-opacity-

Backdrop Saturate

Use the backdropSaturate prop to apply a saturate effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropSaturate="0.4" />
PropCSS PropertyToken Category
backdropSaturate--backdrop-saturate-

Backdrop Sepia

Use the backdropSepia prop to apply a sepia effect to the area behind an element. The requirement for this prop is to use the backdropFilter prop and set it to auto.

<Box backdropFilter="auto" backdropSepia="0.4" />
PropCSS PropertyToken Category
backdropSepia--backdrop-sepia-

Previous

Effects

Next

Flex and Grid