Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shopify/react-native-skia/llms.txt

Use this file to discover all available pages before exploring further.

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>
  );
};