Appearance — Color and style

These modifiers control a component’s surface appearance. opacity sets transparency. foregroundStyle colors text and shape fills (and propagates to descendants), while tint colors interactive controls. background sits behind the component as a color, gradient, material, or another component. cornerRadius, border, and shadow shape and outline the component. They compose in chain order — padding runs before background, so the background extends to cover the padded area.

opacity

Sets the component’s opacity.

.opacity(value: number): Component

value

number

required

The opacity level, from 0 (fully transparent) to 1 (fully opaque).

Unlike .hidden(), a component with .opacity(0) still occupies layout space and remains hittable (responds to tap gestures). Use .allowsHitTesting(false) in combination with .opacity(0) to make it non-interactive. Opacity applies to the entire component subtree, including all children. Semi-transparent component

Text("50% opacity")
    .opacity(0.5)

Fading an image

Image({ url: "background.jpg" })
    .resizable()
    .scaledToFill()
    .opacity(0.3)

Animated fade

const body = () => {
    const [isVisible, setIsVisible] = useState(false)

    return VStack([
        Button("Toggle", () => setIsVisible(!isVisible)),
        Text("Fading content")
            .opacity(isVisible ? 1 : 0)
    ])
}

Disabled appearance

VStack([
    Button("Submit", () => {}),
    Text("Please fill in all fields")
])
    .opacity(0.4)
    .disabled(true)

foregroundStyle

Sets the foreground style (text color, shape fill, etc.) for a component and its descendants.

.foregroundStyle(style: Style)

style

Style

required

A Color, gradient (LinearGradient, RadialGradient, etc.), or Material to apply as the foreground style.

Color text

Text("Blue text")
    .foregroundStyle(Color("blue"))

System color

Text("Secondary text")
    .foregroundStyle(Color("secondaryLabel"))

Gradient text

Text("Gradient")
    .font("largeTitle")
    .foregroundStyle(LinearGradient({
        colors: ["red", "blue"],
        startPoint: "leading",
        endPoint: "trailing"
    }))

Style a shape

Circle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("green"))

Inherited by descendants

VStack([
    Text("All text in this stack"),
    Text("will be red")
])
    .foregroundStyle(Color("red"))

tint

Sets the tint color for interactive controls.

.tint(color: Color): Component

color

Color

required

The tint color to apply to interactive controls such as buttons, toggles, and links.

.tint() affects the accent color of interactive controls, not the text color. Use foregroundStyle to change text or shape fill colors. Tint propagates to child components through the environment. Tinted button

Button("Delete", () => {})
    .tint(Color("red"))

Tinted toggle

const body = () => {
    const [isOn, setIsOn] = useState(false)
    return Toggle("Dark Mode", { isOn, setIsOn })
        .tint(Color("purple"))
}

Tint a container Apply tint to a parent container to affect all interactive children.

VStack([
    Button("Primary Action", () => {}),
    Button("Secondary Action", () => {}),
]).tint(Color("orange"))

background

Sets the background of a component to a color, gradient, material, or another component.

.background(style?: Style)
.background(content: Component)
.background(props: { alignment: Alignment }, content: Component)

style

Style

Style background overload: a Color, gradient, or Material to fill the background.

content

Component

required

Component background overload: a component to render behind this component.

props

object

required

Component background with alignment overload.

Show props

alignment

Alignment

required

How to position the background component within this component’s bounds. See Alignment.

content

Component

required

A component to render behind this component, positioned according to alignment.

Color background

Text("Hello")
    .padding(16)
    .background(Color("blue"))

Gradient background

Text("Gradient")
    .padding(16)
    .background(LinearGradient({
        colors: ["purple", "blue"],
        startPoint: "leading",
        endPoint: "trailing"
    }))

Material background

Text("Frosted")
    .padding(16)
    .background(Material("thin"))

Component background

Text("Labeled")
    .padding(16)
    .background(
        RoundedRectangle(12)
            .foregroundStyle(Color("blue"))
    )

Component background with alignment

Text("Badge")
    .padding(16)
    .background(
        { alignment: "topTrailing" },
        Circle()
            .frame({ width: 12, height: 12 })
            .foregroundStyle(Color("red"))
    )

cornerRadius

Rounds the corners of a component.

.cornerRadius(radius: number)

radius

number

required

The corner radius in points.

cornerRadius clips the content at the corners. For more control over the clipping shape, use clipShape with a RoundedRectangle. Round a card

VStack([
    Text("Card Title").font("headline"),
    Text("Card content goes here.")
])
    .padding(16)
    .background(Color("white"))
    .cornerRadius(12)

Round an image

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 100, height: 100 })
    .cornerRadius(8)

Pill shape with large radius

Text("Tag")
    .padding({ leading: 16, trailing: 16, top: 8, bottom: 8 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .cornerRadius(20)

border

Adds a border around a component.

.border(config?: { style: Style; width?: number } | Style | number)

config

{ style: Style; width?: number } | Style | number

The border configuration. Can be:

An object with style (a Color or gradient) and optional width
A Style value directly (uses default width of 1)
A number specifying just the width (uses the foreground style)

Simple color border

Text("Bordered")
    .padding(12)
    .border(Color("gray"))

Border with custom width

Text("Thick border")
    .padding(12)
    .border({ style: Color("blue"), width: 2 })

Gradient border

Text("Gradient border")
    .padding(12)
    .border({
        style: LinearGradient({
            colors: ["red", "blue"],
            startPoint: "leading",
            endPoint: "trailing"
        }),
        width: 2
    })

Combined with corner radius

Text("Rounded bordered")
    .padding(12)
    .cornerRadius(8)
    .border({ style: Color("blue"), width: 1 })

shadow

Adds a drop shadow to a component.

.shadow(props?: {
    radius: number;
    x?: number;
    y?: number;
    color?: Color;
}): Component

props

object

Show properties

radius

number

required

The blur radius of the shadow in points. Larger values produce a softer, more spread-out shadow.

number

default:"0"

Horizontal offset of the shadow.

number

default:"0"

Vertical offset of the shadow.

color

Color

The shadow color. Defaults to a semi-transparent black.

Basic shadow

RoundedRectangle(12)
    .frame({ width: 200, height: 100 })
    .foregroundStyle(Color("white"))
    .shadow({ radius: 8 })

Offset shadow

Text("Elevated")
    .font("title")
    .padding(16)
    .background(Color("white"))
    .cornerRadius(12)
    .shadow({ radius: 4, x: 0, y: 2 })

Colored shadow

Circle()
    .frame({ width: 80, height: 80 })
    .foregroundStyle(Color("blue"))
    .shadow({ radius: 12, color: Color("blue").opacity(0.5) })

​opacity

​foregroundStyle

​tint

​background

​cornerRadius

​border

​shadow

​See also

opacity

foregroundStyle

tint

background

cornerRadius

border

shadow

See also