Mask Filters

Apply blur and edge effects to shape edges

Mask filters modify the alpha channel of rendered content, creating effects like blur along the edges of shapes. Unlike image filters, mask filters only affect the mask (alpha channel) and are particularly useful for creating glows and soft edges.

BlurMask

Apply a blur effect to the edges of shapes.

Name	Type	Description
blur	number	Blur radius
style	BlurStyle	Blur style (default: “normal”)
respectCTM	boolean	Respect transform (default: true)

import { Canvas, Circle, BlurMask } from "@shopify/react-native-skia";

const BlurMaskDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="blue">
        <BlurMask blur={10} style="normal" />
      </Circle>
    </Canvas>
  );
};

Blur Styles

Mask filters support different blur styles that control how the blur affects the edges:

Normal

Blurs inside and outside the shape’s edges.

<BlurMask blur={10} style="normal" />

Solid

Draws the shape solid with a blurred outer edge.

<BlurMask blur={10} style="solid" />

Outer

Only blurs outside the shape’s edges.

<BlurMask blur={10} style="outer" />

Inner

Only blurs inside the shape’s edges.

<BlurMask blur={10} style="inner" />

Examples

Glow Effect

Create a glowing effect using outer blur:

import { Canvas, Circle, BlurMask } from "@shopify/react-native-skia";

const GlowDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Glow layer */}
      <Circle cx={128} cy={128} r={64} color="cyan">
        <BlurMask blur={20} style="outer" />
      </Circle>
      {/* Solid layer */}
      <Circle cx={128} cy={128} r={64} color="blue" />
    </Canvas>
  );
};

Soft Edges

Create shapes with soft, feathered edges:

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

const SoftEdgesDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <RoundedRect 
        x={50} 
        y={50} 
        width={156} 
        height={156} 
        r={20} 
        color="purple"
      >
        <BlurMask blur={8} style="normal" />
      </RoundedRect>
    </Canvas>
  );
};

Inner Glow

Create an inner glow effect:

import { Canvas, Circle, BlurMask } from "@shopify/react-native-skia";

const InnerGlowDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={64} color="white" />
      <Circle cx={128} cy={128} r={64} color="rgba(255, 100, 0, 0.8)">
        <BlurMask blur={15} style="inner" />
      </Circle>
    </Canvas>
  );
};

Neon Effect

Combine multiple blur masks for a neon effect:

import { Canvas, Text, BlurMask, useFont } from "@shopify/react-native-skia";

const NeonDemo = () => {
  const font = useFont(require("./font.ttf"), 48);

  if (!font) return null;

  return (
    <Canvas style={{ flex: 1, backgroundColor: "#000" }}>
      {/* Outer glow */}
      <Text text="NEON" x={32} y={128} font={font} color="#00ffff">
        <BlurMask blur={20} style="outer" />
      </Text>
      {/* Inner glow */}
      <Text text="NEON" x={32} y={128} font={font} color="#00ffff">
        <BlurMask blur={10} style="solid" />
      </Text>
      {/* Solid text */}
      <Text text="NEON" x={32} y={128} font={font} color="white" />
    </Canvas>
  );
};

respectCTM

The respectCTM property controls whether transformations (scale, rotation) affect the blur radius.

With respectCTM (default)

Blur scales with transformations:

import { Canvas, Group, Circle, BlurMask } from "@shopify/react-native-skia";

const ScaledBlurDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group transform={[{ scale: 2 }]}>
        <Circle cx={64} cy={64} r={32} color="blue">
          <BlurMask blur={5} respectCTM={true} />
        </Circle>
      </Group>
    </Canvas>
  );
};

Without respectCTM

Blur radius stays constant regardless of transformations:

<BlurMask blur={5} respectCTM={false} />

Mask Filters vs Image Filters

Mask Filters:

• Only affect the alpha channel (transparency)
• Faster performance
• Best for edge effects and glows
• Applied before color

Image Filters:

• Affect the entire rendered output (color and alpha)
• More computationally expensive
• Best for blur, shadows, and color effects
• Applied after rendering

import { Canvas, Circle, BlurMask, Blur } from "@shopify/react-native-skia";

const ComparisonDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      {/* Mask filter - only edges blur */}
      <Circle cx={64} cy={128} r={32} color="blue">
        <BlurMask blur={10} style="normal" />
      </Circle>

      {/* Image filter - entire shape blurs */}
      <Circle cx={192} cy={128} r={32} color="blue">
        <Blur blur={10} />
      </Circle>
    </Canvas>
  );
};

Combining with Other Effects

Mask filters work well with other paint properties:

import { Canvas, Circle, BlurMask } from "@shopify/react-native-skia";

const CombinedDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle 
        cx={128} 
        cy={128} 
        r={64} 
        color="transparent"
        style="stroke"
        strokeWidth={4}
      >
        <BlurMask blur={8} style="normal" />
      </Circle>
    </Canvas>
  );
};

Imperative API

Create mask filters imperatively:

import { Skia, BlurStyle } from "@shopify/react-native-skia";

const maskFilter = Skia.MaskFilter.MakeBlur(
  BlurStyle.Normal,
  10,    // blur radius
  true   // respectCTM
);

const paint = Skia.Paint();
paint.setMaskFilter(maskFilter);

Performance Tips

• Mask filters are generally faster than image filters
• Smaller blur radii perform better
• Use respectCTM={false} for consistent blur at different scales
• Consider using mask filters instead of image filters for edge effects

Related

• Image Filters - Blur and other full-content effects
• Color Filters - Color transformations
• Paint Properties - Styling options
• Blend Modes - Compositing operations