How to Create Gradient Background in Android Jetpack Compose 2023

Color gradients are helpful in enhancing the beauty of your mobile app. Let’s learn how to create a background with the color gradient in Jetpack Compose.

• Linear Gradient in Jetpack Compose,
• Horizontal Gradient in Jetpack Compose,
• Vertical Gradient in Jetpack Compose,
• Radial Gradient in Jetpack Compose

Linear Gradient in Jetpack Compose 

You can create a linear gradient using Brush and its linearGradient function. You also have options to choose multiple colors and offsets.

@Composable
fun LinearGradient() {
    val gradient = Brush.linearGradient(
        0.0f to Color.Magenta,
        500.0f to Color.Cyan,
        start = Offset.Zero,
        end = Offset.Infinite
    )
    Box(modifier = Modifier.background(gradient))
}

..

Horizontal Gradient in Jetpack Compose

You can create horizontal gradient background using Brush and the function horizontalGradient.

@Composable
fun HorizontalGradient() {
    val gradient = Brush.horizontalGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        startX = 0.0f,
        endX = 1000.0f
    )
    Box(modifier = Modifier.background(gradient))
}

..

Vertical Gradient in Jetpack Compose 

The Brush class and its verticalGradient functions help you to show vertical gradient background.

@Composable
fun VerticalGradient() {
    val gradient = Brush.verticalGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        startY = 0.0f,
        endY = 1500.0f
    )
    Box(modifier = Modifier.background(gradient))
}

..

Radial Gradient in Jetpack Compose

A radial gradient is a gradient that radiates from an origin.

@Composable
fun RadialGradient() {
    val gradient = Brush.radialGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        radius = 1500.0f,
        tileMode = TileMode.Repeated
    )
    Box(modifier = Modifier.background(gradient))
}

..

Source code:

package com.boltuix.gradient

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.tooling.preview.Preview
import com.boltuix.gradient.ui.theme.GradientTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GradientTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    LinearGradient()
                }
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GradientTheme {
        LinearGradient()
    }
}


@Composable
fun LinearGradient() {
    val gradient = Brush.linearGradient(
        0.0f to Color.Magenta,
        500.0f to Color.Cyan,
        start = Offset.Zero,
        end = Offset.Infinite
    )
    Box(modifier = Modifier.background(gradient))
}


@Composable
fun HorizontalGradient() {
    val gradient = Brush.horizontalGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        startX = 0.0f,
        endX = 1000.0f
    )
    Box(modifier = Modifier.background(gradient))
}

@Composable
fun VerticalGradient() {
    val gradient = Brush.verticalGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        startY = 0.0f,
        endY = 1500.0f
    )
    Box(modifier = Modifier.background(gradient))
}


@Composable
fun RadialGradient() {
    val gradient = Brush.radialGradient(
        0.0f to Color.Magenta,
        1.0f to Color.Cyan,
        radius = 1500.0f,
        tileMode = TileMode.Repeated
    )
    Box(modifier = Modifier.background(gradient))
}

..

..