> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance — Effects

> Filter and compositing effects — blur, color adjustments, and blend modes

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

export const ComposeJS = ({code, name, height}) => {
  const encodedCode = useMemo(() => {
    if (!code) return "";
    try {
      return btoa(code);
    } catch (e) {
      console.error("Failed to encode code", e);
      return "";
    }
  }, [code]);
  if (!encodedCode) {
    return null;
  }
  return <iframe src={`https://www.metabind.ai/embed?code=${encodedCode}&name=${name ?? 'Example'}`} loading="lazy" style={{
    width: "100%",
    height: height || '350px',
    border: "1px solid #e5e7eb",
    borderRadius: "var(--rounded-2xl,1rem)",
    overflow: "hidden"
  }} title="ComposeJS Preview" />;
};

These modifiers apply image-style filters to a component and its descendants. `blur` softens content with a Gaussian blur. `saturation`, `brightness`, `contrast`, `grayscale`, and `colorInvert` adjust the color values of the rendered output.

`blendMode` changes how the component composites with content drawn behind it — useful for overlays, tinting, and text that adapts to its background.

## blur

Applies a Gaussian blur effect to a component.

```typescript theme={null}
.blur(radius: number)
```

<ParamField path="radius" type="number" required>
  The blur radius in points. Higher values produce a more blurred result. A value of `0` produces no blur.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "partial", note: "Android 12+ only; no effect on older devices" },
web: { status: "supported" },
}}
/>

**Basic blur**

```typescript theme={null}
Image({ url: "background.jpg" })
    .resizable()
    .blur(10)
```

**Blur behind text for readability**

```typescript theme={null}
ZStack([
    Image({ url: "photo.jpg" })
        .resizable()
        .blur(20),
    Text("Overlay Text")
        .foregroundStyle(Color("white"))
        .font("title")
])
```

## saturation

Adjusts the color saturation of a component.

```typescript theme={null}
.saturation(amount: number): Component
```

<ParamField path="amount" type="number" required>
  The saturation multiplier. `0` produces grayscale, `1` is the original color, and values greater than `1` oversaturate.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Desaturate to grayscale**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0)
```

**Half saturation**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0.5)
```

**Oversaturated**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(2)
```

## brightness

Adjusts the brightness of a component.

```typescript theme={null}
.brightness(amount: number)
```

<ParamField path="amount" type="number" required>
  The brightness adjustment, from `-1` (completely dark) to `1` (completely bright). A value of `0` leaves brightness unchanged.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Brighten an image**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .brightness(0.2)
```

**Darken a background**

```typescript theme={null}
Image({ url: "background.jpg" })
    .resizable()
    .brightness(-0.3)
```

## contrast

Adjusts the contrast of a component.

```typescript theme={null}
.contrast(amount: number)
```

<ParamField path="amount" type="number" required>
  The contrast adjustment. `0` produces flat gray, `1` is the original contrast, and values greater than `1` increase contrast.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Increase contrast**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .contrast(1.5)
```

**Reduce contrast**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .contrast(0.5)
```

## grayscale

Applies a grayscale filter to the component.

```typescript theme={null}
.grayscale(amount?: number): Component
```

<ParamField path="amount" type="number" optional default="1">
  The intensity of the grayscale effect, from `0` (full color) to `1` (fully desaturated).
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Fully desaturated**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale()
```

**Partial grayscale**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale(0.5)
```

**Conditional grayscale**

```typescript theme={null}
const body = () => {
    const [disabled, setDisabled] = useState(false)

    return Image({ url: "avatar.jpg" })
        .resizable()
        .frame({ width: 64, height: 64 })
        .grayscale(disabled ? 1 : 0)
}
```

## colorInvert

Inverts all colors in a component.

```typescript theme={null}
.colorInvert()
```

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Invert an image**

```typescript theme={null}
Image({ url: "photo.jpg" })
    .resizable()
    .colorInvert()
```

**Invert a color swatch**

```typescript theme={null}
Color("blue")
    .frame({ width: 100, height: 100 })
    .colorInvert()
```

## blendMode

Sets the blend mode for compositing a component with content behind it.

```typescript theme={null}
.blendMode(mode: BlendMode)
```

<ParamField path="mode" type="BlendMode" required>
  The blend mode to use when compositing. See [BlendMode](/bindjs/types/BlendMode).
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: { status: "supported" },
}}
/>

**Multiply blend**

```typescript theme={null}
Image({ url: "overlay.png" })
    .resizable()
    .blendMode("multiply")
```

**Screen blend for lightening**

```typescript theme={null}
Color("blue")
    .frame({ width: 100, height: 100 })
    .blendMode("screen")
```

**Overlay blend on text**

```typescript theme={null}
Text("Blended")
    .font("largeTitle")
    .foregroundStyle(Color("red"))
    .blendMode("overlay")
```

## See also

* [opacity](/bindjs/modifiers/appearance-color-and-style#opacity) — adjust transparency
* [foregroundStyle](/bindjs/modifiers/appearance-color-and-style#foregroundstyle) — set text and shape colors
* [BlendMode](/bindjs/types/BlendMode) — supported blend modes