Clipping and masking

Clipping and masking modifiers control which parts of a component are visible. clipped trims content to the component’s rectangular bounds; clipShape clips to any Shape — circle, capsule, rounded rectangle; mask uses an image’s luminance to drive transparency. clipShape clips both visuals and hit testing, so taps land only inside the shape. To change just the hit area without altering visuals, see contentShape. For overall transparency, see opacity.

clipped

Clips a component’s content to its bounding frame.

.clipped()

Clip overflowing content

Image({ url: "wide-image.jpg" })
    .resizable()
    .frame({ width: 100, height: 100 })
    .clipped()

Clip after aspect ratio fill

Image({ url: "photo.jpg" })
    .resizable()
    .aspectRatio(1, "fill")
    .frame({ width: 150, height: 150 })
    .clipped()

clipped() clips to the component’s rectangular bounds. For clipping to a custom shape, use clipShape instead.

clipShape

Clips a component’s content to a specific shape.

.clipShape(shape: Shape)

shape

Shape

required

The shape to clip to. Common shapes include Circle(), Capsule(), RoundedRectangle(cornerRadius), Rectangle(), and Ellipse().

Clip an image to a circle

Image({ url: "avatar.jpg" })
    .resizable()
    .frame({ width: 64, height: 64 })
    .clipShape(Circle())

Clip to a rounded rectangle

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 150 })
    .clipShape(RoundedRectangle(16))

Clip to a capsule

Text("Tag")
    .padding({ leading: 12, trailing: 12, top: 6, bottom: 6 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .clipShape(Capsule())

clipShape clips both the visual content and the hit-testing area. To change only the hit-testing shape without clipping visuals, use contentShape.

mask

Masks the component using an image, controlling which areas are visible.

.mask(image: Image): Component

image

Image

required

The image used as a mask. White areas show the underlying content, black areas hide it. Gray values produce partial transparency.

Masking with an image

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

Gradient fade using a shape mask

Text("Fading text that trails off at the bottom")
    .frame({ maxWidth: 200 })
    .mask(
        LinearGradient({
            colors: ["black", "clear"],
            startPoint: "top",
            endPoint: "bottom"
        })
    )

The mask image’s luminance determines visibility: white (or light) areas show the content, black (or dark) areas hide it. On web, this is implemented using CSS mask-image.

​clipped

​clipShape

​mask

​See also

clipped

clipShape

mask

See also