Skip to main content
Backdrop filters apply effects to the content that has already been rendered behind an element, creating effects like frosted glass or blurred backgrounds.

​
BackdropFilter

The base component for applying filters to backdrop content.
NameTypeDescription
filterReactElementImage filter to apply
clipClipDefOptional clipping region
childrenReactNodeContent to render on top
import { Canvas, BackdropFilter, Blur, Circle, Fill } from "@shopify/react-native-skia";

const BackdropDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Background content */}
      <Fill color="lightblue" />
      <Circle cx={128} cy={128} r={40} color="red" />
      <Circle cx={180} cy={100} r={40} color="green" />
      <Circle cx={100} cy={180} r={40} color="blue" />

      {/* Backdrop filter region */}
      <BackdropFilter 
        filter={<Blur blur={10} />}
        clip={{ x: 60, y: 200, width: 136, height: 80 }}
      >
        <Rect x={60} y={200} width={136} height={80} color="rgba(255, 255, 255, 0.3)" />
      </BackdropFilter>
    </Canvas>
  );
};

​
BackdropBlur

Convenience component for backdrop blur effects.
NameTypeDescription
blurnumber or VectorBlur radius
clipClipDefOptional clipping region
childrenReactNodeContent to render on top
import { Canvas, BackdropBlur, Fill, Circle, RoundedRect } from "@shopify/react-native-skia";

const FrostedGlassDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Background */}
      <Fill color="#87CEEB" />
      <Circle cx={64} cy={64} r={32} color="yellow" />
      <Circle cx={192} cy={64} r={32} color="orange" />
      <Circle cx={64} cy={192} r={32} color="pink" />
      <Circle cx={192} cy={192} r={32} color="purple" />

      {/* Frosted glass card */}
      <BackdropBlur blur={20} clip={{ x: 40, y: 40, width: 176, height: 176 }}>
        <RoundedRect
          x={40}
          y={40}
          width={176}
          height={176}
          r={20}
          color="rgba(255, 255, 255, 0.3)"
          style="fill"
        />
        <RoundedRect
          x={40}
          y={40}
          width={176}
          height={176}
          r={20}
          color="rgba(255, 255, 255, 0.8)"
          style="stroke"
          strokeWidth={1}
        />
      </BackdropBlur>
    </Canvas>
  );
};

​
Clipping Regions

Backdrop filters can be clipped to specific regions:

​
Rectangle Clip

<BackdropBlur 
  blur={15} 
  clip={{ x: 50, y: 50, width: 156, height: 156 }}
>
  {/* Content */}
</BackdropBlur>

​
Rounded Rectangle Clip

const clip = rrect(rect(50, 50, 156, 156), 20, 20);

<BackdropBlur blur={15} clip={clip}>
  {/* Content */}
</BackdropBlur>

​
Path Clip

const clipPath = Skia.Path.Make();
clipPath.addCircle(128, 128, 80);

<BackdropBlur blur={15} clip={clipPath}>
  {/* Content */}
</BackdropBlur>

​
Frosted Glass Effect

Create iOS-style frosted glass panels: 
import { 
  Canvas, 
  BackdropBlur, 
  RoundedRect, 
  Image, 
  useImage 
} from "@shopify/react-native-skia";

const FrostedGlassPanel = () => {
  const background = useImage(require("./background.jpg"));

  if (!background) return null;

  return (
    <Canvas style={{ width: 300, height: 400 }}>
      {/* Background image */}
      <Image 
        image={background} 
        x={0} 
        y={0} 
        width={300} 
        height={400} 
        fit="cover" 
      />

      {/* Frosted glass panel */}
      <BackdropBlur 
        blur={30} 
        clip={{ x: 50, y: 100, width: 200, height: 200 }}
      >
        <RoundedRect
          x={50}
          y={100}
          width={200}
          height={200}
          r={16}
          color="rgba(255, 255, 255, 0.2)"
        />
        <RoundedRect
          x={50}
          y={100}
          width={200}
          height={200}
          r={16}
          color="rgba(255, 255, 255, 0.5)"
          style="stroke"
          strokeWidth={1}
        />
      </BackdropBlur>
    </Canvas>
  );
};

​
Advanced Backdrop Filters

You can use any image filter as a backdrop filter:

​
Backdrop Color Filter

import { Canvas, BackdropFilter, ColorMatrix, Rect } from "@shopify/react-native-skia";

const grayscale = [
  0.33, 0.33, 0.33, 0, 0,
  0.33, 0.33, 0.33, 0, 0,
  0.33, 0.33, 0.33, 0, 0,
  0,    0,    0,    1, 0
];

const BackdropGrayscaleDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Colorful background */}
      <Fill color="rainbow" />
      
      {/* Grayscale region */}
      <BackdropFilter 
        filter={<ColorMatrix matrix={grayscale} />}
        clip={{ x: 50, y: 50, width: 156, height: 156 }}
      >
        <Rect x={50} y={50} width={156} height={156} color="rgba(0, 0, 0, 0.1)" />
      </BackdropFilter>
    </Canvas>
  );
};

​
Combined Backdrop Filters

import { 
  Canvas, 
  BackdropFilter, 
  Blur, 
  Shadow,
  RoundedRect 
} from "@shopify/react-native-skia";

const CombinedBackdropDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Background */}
      <Fill color="lightblue" />
      
      <BackdropFilter 
        filter={
          <>
            <Blur blur={20} />
            <Shadow dx={0} dy={0} blur={10} color="rgba(0, 0, 0, 0.2)" />
          </>
        }
        clip={{ x: 50, y: 50, width: 156, height: 156 }}
      >
        <RoundedRect
          x={50}
          y={50}
          width={156}
          height={156}
          r={20}
          color="rgba(255, 255, 255, 0.4)"
        />
      </BackdropFilter>
    </Canvas>
  );
};

​
Blurred Card Stack

Create a stack of blurred cards: 
import { Canvas, BackdropBlur, RoundedRect, Fill } from "@shopify/react-native-skia";

const CardStackDemo = () => {
  return (
    <Canvas style={{ width: 300, height: 400 }}>
      <Fill color="linear-gradient(180deg, #667eea 0%, #764ba2 100%)" />

      {/* Card 1 */}
      <BackdropBlur blur={15} clip={{ x: 30, y: 50, width: 240, height: 100 }}>
        <RoundedRect
          x={30}
          y={50}
          width={240}
          height={100}
          r={16}
          color="rgba(255, 255, 255, 0.25)"
        />
      </BackdropBlur>

      {/* Card 2 */}
      <BackdropBlur blur={15} clip={{ x: 30, y: 170, width: 240, height: 100 }}>
        <RoundedRect
          x={30}
          y={170}
          width={240}
          height={100}
          r={16}
          color="rgba(255, 255, 255, 0.25)"
        />
      </BackdropBlur>

      {/* Card 3 */}
      <BackdropBlur blur={15} clip={{ x: 30, y: 290, width: 240, height: 100 }}>
        <RoundedRect
          x={30}
          y={290}
          width={240}
          height={100}
          r={16}
          color="rgba(255, 255, 255, 0.25)"
        />
      </BackdropBlur>
    </Canvas>
  );
};

​
Performance Considerations

  • Backdrop filters can be expensive, especially with large blur radii
  • Use clipping to limit the area affected by the filter
  • Smaller blur radii perform better
  • Consider using backdrop filters sparingly in complex scenes
  • On some platforms, backdrop filters may have limited support

​
Platform Support

  • iOS: Full support
  • Android: Full support
  • Web: Supported via CanvasKit
Note: Performance characteristics may vary by platform.

​
Backdrop Blur vs Regular Blur

Backdrop Blur:
  • Blurs content already rendered behind an element
  • Creates frosted glass effects
  • Only affects backdrop, not the element itself
  • Applied before rendering the element
Regular Blur (Image Filter):
  • Blurs the element it’s applied to
  • Affects the element’s rendered output
  • Does not affect background content
  • Applied after rendering the element
import { Canvas, Circle, BackdropBlur, Blur, Fill } from "@shopify/react-native-skia";

const ComparisonDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="lightblue" />
      <Circle cx={64} cy={128} r={20} color="red" />
      
      {/* Backdrop blur - blurs the red circle behind it */}
      <BackdropBlur blur={10} clip={{ x: 40, y: 104, width: 48, height: 48 }}>
        <Rect x={40} y={104} width={48} height={48} color="rgba(255, 255, 255, 0.5)" />
      </BackdropBlur>

      {/* Regular blur - blurs the circle itself */}
      <Circle cx={192} cy={128} r={20} color="red">
        <Blur blur={10} />
      </Circle>
    </Canvas>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us