Gradients

Linear, radial, and sweep brushes

A Brush describes how to paint an area. Brush.linearGradient interpolates along a vector, Brush.radialGradient fans out from a center, and Brush.sweepGradient sweeps around it. Any brush can fill a composable via Modifier.background.

View source Material docs All components

Gradients demos rendered in Compose Playground — Pixel-accurate preview · light theme

Three brush types

Each box clips to a rounded shape and fills with a different gradient.

val colors = listOf(Color(0xFF6750A4), Color(0xFF7D5260), Color(0xFF386A20))
Box(
    Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
        .background(Brush.linearGradient(colors))
)
Box(
    Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
        .background(Brush.radialGradient(colors))
)
Box(
    Modifier.size(80.dp).clip(RoundedCornerShape(16.dp))
        .background(Brush.sweepGradient(colors))
)

Examples

Related components