Skip to main content

Opacity

Applies opacity to the component and its children.

The opacity is applied to each descendent individually. Overlapping parts of components will become visible.

modifier Opacity

Example​

import { Opacity, Text } from ui

export var main = Text("Hello, world!") with {
    Opacity(0.5)
}

Because the opacity is applied to each descendant individually rather than to the flattened result, overlapping children bleed through one another. Here two squares overlap — in the shared region you can see through the top square to the one below:

import { Opacity, ZStack, Rectangle, Frame, Offset } from ui

export var main = ZStack {
    Rectangle(color: Color(0xFFFF5F52)) with {
        Frame(width: 80, height: 80)
    }
    Rectangle(color: Color(0xFF2196F3)) with {
        Frame(width: 80, height: 80)
        Offset(x: 40, y: 40)
    }
} with {
    Opacity(0.5)
}

Two overlapping squares whose opacity is applied individually, bleeding through each other

Constructor​

constructor(_ opacity: Float)
_ opacity: Float

A value between 0.0 (fully transparent) and 1.0 (fully opaque).

Layout Behavior​

None.