Interface FilterProps

interface FilterProps {
    backdropBlur?: ResponsiveValue<{}>;
    backdropBrightness?: ResponsiveValue<Length>;
    backdropContrast?: ResponsiveValue<Length>;
    backdropFilter?: ResponsiveValue<("auto" | BackdropFilter)>;
    backdropHueRotate?: ResponsiveValue<Length>;
    backdropInvert?: ResponsiveValue<Length>;
    backdropSaturate?: ResponsiveValue<Length>;
    blur?: ResponsiveValue<{}>;
    brightness?: ResponsiveValue<Length>;
    contrast?: ResponsiveValue<Length>;
    dropShadow?: ResponsiveValue<BoxShadow>;
    filter?: ResponsiveValue<("auto" | Filter)>;
    hueRotate?: ResponsiveValue<Length>;
    invert?: ResponsiveValue<Length>;
    saturate?: ResponsiveValue<Length>;
}

Hierarchy (view full)

Properties

backdropBlur? backdropBrightness? backdropContrast? backdropFilter? backdropHueRotate? backdropInvert? backdropSaturate? blur? brightness? contrast? dropShadow? filter? hueRotate? invert? saturate?

Properties

Optional backdropBlur

backdropBlur?: ResponsiveValue<{}>

Sets the backdrop-blur filter value of an element. Value is assigned to --chakra-backdrop-blur css variable

Type declaration

    Optional backdropBrightness

    backdropBrightness?: ResponsiveValue<Length>

    Sets the backdrop-brightness filter value of an element. Value is assigned to --chakra-backdrop-brightness css variable

    Optional backdropContrast

    backdropContrast?: ResponsiveValue<Length>

    Sets the backdrop-contrast filter value of an element. Value is assigned to --chakra-backdrop-contrast css variable

    Optional backdropFilter

    backdropFilter?: ResponsiveValue<("auto" | BackdropFilter)>

    The CSS backdrop-filter property. When set to auto, you allow Chakra UI to define the color based on the backdrop filter style props (backdropBlur, backdropSaturate, etc.)

    Optional backdropHueRotate

    backdropHueRotate?: ResponsiveValue<Length>

    Sets the backdrop-hue-rotate filter value of an element. Value is assigned to --chakra-backdrop-hue-rotate css variable

    Optional backdropInvert

    backdropInvert?: ResponsiveValue<Length>

    Sets the backdrop-invert filter value of an element. Value is assigned to --chakra-backdrop-invert css variable

    Optional backdropSaturate

    backdropSaturate?: ResponsiveValue<Length>

    Sets the backdrop-saturate filter value of an element. Value is assigned to --chakra-backdrop-saturate css variable

    Optional blur

    blur?: ResponsiveValue<{}>

    Sets the blur filter value of an element. Value is assigned to --chakra-filter css variable

    Type declaration

      Optional brightness

      brightness?: ResponsiveValue<Length>

      Sets the brightness filter value of an element. Value is assigned to --chakra-brightness css variable

      Optional contrast

      contrast?: ResponsiveValue<Length>

      Sets the contrast filter value of an element. Value is assigned to --chakra-contrast css variable

      Optional dropShadow

      dropShadow?: ResponsiveValue<BoxShadow>

      Sets the drop-shadow filter value of an element. Value is assigned to --chakra-drop-shadow css variable

      Optional filter

      filter?: ResponsiveValue<("auto" | Filter)>

      The CSS filter property. When set to auto, you allow Chakra UI to define the color based on the filter style props (blur, saturate, etc.)

      Optional hueRotate

      hueRotate?: ResponsiveValue<Length>

      Sets the hue-rotate filter value of an element. Value is assigned to --chakra-hue-rotate css variable

      Optional invert

      invert?: ResponsiveValue<Length>

      Sets the invert filter value of an element. Value is assigned to --chakra-invert css variable

      Optional saturate

      saturate?: ResponsiveValue<Length>

      Sets the saturation filter value of an element. Value is assigned to --chakra-saturate css variable

      Settings

      Member Visibility

      Theme

      On This Page

      Generated using TypeDoc