Skip to main content
.blur(radius: number)
​
radius
number
required
The blur radius in points. Higher values produce a more blurred result. A value of 0 produces no blur.

​
Support

​
Usage

​
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")
])

​
See Also