Appearance — Effects

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.

.blur(radius: number)

number

required

The blur radius in points. Higher values produce a more blurred result. A value of 0 produces no blur.

Basic blur

Image({ url: "background.jpg" })
    .resizable()
    .blur(10)

Blur behind text for readability

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

saturation

Adjusts the color saturation of a component.

.saturation(amount: number): Component

number

required

The saturation multiplier. 0 produces grayscale, 1 is the original color, and values greater than 1 oversaturate.

Desaturate to grayscale

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0)

Half saturation

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(0.5)

Oversaturated

Image({ url: "photo.jpg" })
    .frame({ width: 200, height: 200 })
    .saturation(2)

brightness

Adjusts the brightness of a component.

.brightness(amount: number)

number

required

The brightness adjustment, from -1 (completely dark) to 1 (completely bright). A value of 0 leaves brightness unchanged.

Brighten an image

Image({ url: "photo.jpg" })
    .resizable()
    .brightness(0.2)

Darken a background

Image({ url: "background.jpg" })
    .resizable()
    .brightness(-0.3)

contrast

Adjusts the contrast of a component.

.contrast(amount: number)

number

required

The contrast adjustment. 0 produces flat gray, 1 is the original contrast, and values greater than 1 increase contrast.

Increase contrast

Image({ url: "photo.jpg" })
    .resizable()
    .contrast(1.5)

Reduce contrast

Image({ url: "photo.jpg" })
    .resizable()
    .contrast(0.5)

grayscale

Applies a grayscale filter to the component.

.grayscale(amount?: number): Component

number

default:"1"

The intensity of the grayscale effect, from 0 (full color) to 1 (fully desaturated).

Fully desaturated

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale()

Partial grayscale

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })
    .grayscale(0.5)

Conditional grayscale

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.

.colorInvert()

Invert an image

Image({ url: "photo.jpg" })
    .resizable()
    .colorInvert()

Invert a color swatch

Color("blue")
    .frame({ width: 100, height: 100 })
    .colorInvert()

blendMode

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

.blendMode(mode: BlendMode)

BlendMode

required

The blend mode to use when compositing. See BlendMode.

Multiply blend

Image({ url: "overlay.png" })
    .resizable()
    .blendMode("multiply")

Screen blend for lightening

Color("blue")
    .frame({ width: 100, height: 100 })
    .blendMode("screen")

Overlay blend on text

Text("Blended")
    .font("largeTitle")
    .foregroundStyle(Color("red"))
    .blendMode("overlay")

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Appearance — Effects

blur

saturation

brightness

contrast

grayscale

colorInvert

blendMode

See also

​blur

​saturation

​brightness

​contrast

​grayscale

​colorInvert

​blendMode

​See also

blur

saturation

brightness

contrast

grayscale

colorInvert

blendMode

See also