Filters
JSX style props for applying various filters to elements.
Use the filter prop to apply visual effects like blur or color shift to an
element.
<Box filter="blur(5px)" />
<Box filter="grayscale(80%)" />| Prop | CSS Property | Token Category |
|---|---|---|
filter | filter | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
blur | --blur | blurs |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
contrast | --contrast | - |
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)" />| Prop | CSS Property | Token Category |
|---|---|---|
dropShadow | --drop-shadow | - |
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%" />| Prop | CSS Property | Token Category |
|---|---|---|
grayscale | --grayscale | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
hueRotate | --hue-rotate | - |
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%" />| Prop | CSS Property | Token Category |
|---|---|---|
invert | --invert | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
saturate | --saturate | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
sepia | --sepia | - |
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%)" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropFilter | backdrop-filter | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropBlur | --backdrop-blur | blurs |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropContrast | --backdrop-contrast | - |
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%" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropGrayscale | --backdrop-grayscale | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropHueRotate | --backdrop-hue-rotate | - |
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%" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropInvert | --backdrop-invert | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropOpacity | --backdrop-opacity | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropSaturate | --backdrop-saturate | - |
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" />| Prop | CSS Property | Token Category |
|---|---|---|
backdropSepia | --backdrop-sepia | - |