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

​
Parameters

​
style
Style
A style to use as background. Can be a Color, Gradient, or Material.
​
content
Component
A component to use as the background for this view.
​
props
{ alignment: Alignment }
Configuration object for component backgrounds.

​
Support

​
Usage

​
Color background

Text("Hello World")
    .background(Color("blue"))

​
Gradient background

Text("Gradient text")
    .background(LinearGradient({
        colors: [Color("red"), Color("blue")],
        startPoint: "topLeading",
        endPoint: "bottomTrailing"
    }))

​
Material background

Text("Frosted glass effect")
    .background(Material("thin"))

​
Component background

Text("Text over rectangle")
    .background(Rectangle().fill(Color("gray")))

​
Component background with alignment

Text("Aligned background")
    .background(
        { alignment: "topLeading" },
        Circle().fill(Color("red")).frame(50, 50)
    )

​
Examples

​
Multiple backgrounds

Text("Layered backgrounds")
    .background(Color("white"))
    .background(
        RoundedRectangle(10)
            .fill(Color("blue").opacity(0.3))
    )

​
Complex gradient backgrounds

VStack([
    Text("Angular Gradient")
        .background(AngularGradient({
            colors: [Color("red"), Color("yellow"), Color("green")],
            center: "center"
        })),
    
    Text("Radial Gradient")
        .background(RadialGradient({
            colors: [Color("white"), Color("black")],
            center: "center",
            startRadius: 0,
            endRadius: 100
        }))
])

​
Material variations

VStack([
    Text("Regular Material").background(Material("regular")),
    Text("Thin Material").background(Material("thin")),
    Text("Thick Material").background(Material("thick")),
    Text("Ultra Thin Material").background(Material("ultraThin"))
])