How to Add a Gradient in Compose

Adding a gradient in Jetpack Compose involves creating a Brush object and applying it to a composable's background using a Modifier.

Gradients are represented by the Brush class in Compose, allowing you to define how colors transition across a drawing area. You can then use this Brush with the Modifier.background() extension function to fill the background of any composable element.

Understanding Brush in Compose

The Brush class is the core concept for drawing with gradients. It defines the pattern used to fill shapes, and gradients are a common type of brush. Compose provides several factory functions within the Brush object to create different gradient types:

• linearGradient: Creates a gradient that transitions linearly between colors. This can be horizontal, vertical, or at an angle.
• radialGradient: Creates a gradient that radiates outward from a central point.
• sweepGradient: Creates a gradient that sweeps around a central point like a clock hand.

Types of Gradients and How to Use Them

Here's how to create and apply different gradient types.

1. Linear Gradients

Linear gradients transition colors along a straight line. You specify a start and end point, and a list of colors.

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun LinearGradientExample() {
    // Reference 1: Creating a horizontal gradient with a list of colors
    val horizontalBrush = Brush.horizontalGradient(
        listOf(Color.Red, Color.Yellow, Color.Green)
    )

    val verticalBrush = Brush.verticalGradient(
        listOf(Color.Blue, Color.Cyan)
    )

    val angledBrush = Brush.linearGradient(
        colors = listOf(Color.Magenta, Color.White, Color.Blue),
        start = androidx.compose.ui.geometry.Offset(0f, 0f), // Top-left
        end = androidx.compose.ui.geometry.Offset(Float.POSITIVE_INFINITY, Float.POSITIVE_INFINITY) // Bottom-right
    )

    // Reference 3: Applying the Brush to a Box's background modifier
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(horizontalBrush) // Apply the gradient here
    ) {
        // Content of the Box goes here
    }
}

• Brush.horizontalGradient() and Brush.verticalGradient() are convenient shortcuts for common linear gradients.
• Brush.linearGradient() gives you full control over the start and end Offset points for angled gradients.

2. Radial Gradients

Radial gradients transition colors outward from a central point in a circle.

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset

@Composable
fun RadialGradientExample() {
    val radialBrush = Brush.radialGradient(
        colors = listOf(Color.White, Color.Red),
        center = Offset(400f, 400f), // Center point in pixels
        radius = 300f // Radius of the gradient circle
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(radialBrush)
    ) {
        // Content
    }
}

3. Sweep Gradients

Sweep gradients transition colors as if sweeping around a central point.

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset

@Composable
fun SweepGradientExample() {
    val sweepBrush = Brush.sweepGradient(
        colors = listOf(Color.Gray, Color.Black, Color.Gray),
        center = Offset(500f, 500f) // Center point
    )

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(sweepBrush)
    ) {
        // Content
    }
}

Using Color Stops

Instead of just providing a list of colors, you can specify exactly where each color should appear in the gradient using color stops. Color stops are defined as pairs of a float position (0.0f to 1.0f) and a Color.

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun GradientWithStopsExample() {
    // Reference 2: Defining color stops using an Array<Pair<Float, Color>>
    val colorStops = arrayOf(
        0.0f to Color.Yellow,
        0.2f to Color.Red,
        0.7f to Color.Blue,
        1.0f to Color.Green
    )

    val brushWithStops = Brush.linearGradient(colorStops = colorStops)
    // You can use colorStops with linear, radial, or sweep gradients

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(brushWithStops)
    ) {
        // Content
    }
}

• The float value in the pair represents the position along the gradient line (or radius/sweep) from 0.0f (start) to 1.0f (end).
• Colors are interpolated smoothly between the specified stops.

Applying the Gradient

Once you have a Brush object, you apply it using the Modifier.background() function, as seen in the examples above.

Box(
    // Reference 3: Applying the Brush within the background modifier
    modifier = Modifier
        .fillMaxSize() // Ensure the Box fills the available space
        .background(Brush.verticalGradient(listOf(Color.Gray, Color.LightGray))) // Apply your gradient Brush here
) {
    // The content inside this Box will have the gradient background
}

By creating a Brush and applying it with Modifier.background(), you can easily add visually appealing gradients to the background of any Composable.