---
title: "background"
description: "Draws [shape] with a solid [color] behind the content."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.background(color: Color, shape: Shape = RectangleShape): Modifier
```


Draws `shape` with a solid `color` behind the content.

#### Parameters

| | |
| --- | --- |
| color | color to paint background with |
| shape | desired shape of the background |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.background(
    brush: Brush,
    shape: Shape = RectangleShape,
    @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1.0f,
) =
    this.then(
        BackgroundElement(
            brush = brush,
            alpha = alpha,
            shape = shape,
            inspectorInfo =
                debugInspectorInfo {
                    name = "background"
                    properties["alpha"] = alpha
                    properties["brush"] = brush
                    properties["shape"] = shape
                },
        )
    )
```


Draws `shape` with `brush` behind the content.

#### Parameters

| | |
| --- | --- |
| brush | brush to paint background with |
| shape | desired shape of the background |
| alpha | Opacity to be applied to the `brush`, with `0` being completely transparent and `1` being completely opaque. The value must be between `0` and `1`. |




## Code Examples
### DrawBackgroundColor
```kotlin
@Composable
fun DrawBackgroundColor() {
    Text("Text with background", Modifier.background(color = Color.Magenta).padding(10.dp))
}
```
### DrawBackgroundShapedBrush
```kotlin
@Composable
fun DrawBackgroundShapedBrush() {
    val gradientBrush =
        Brush.horizontalGradient(
            colors = listOf(Color.Red, Color.Blue, Color.Green),
            startX = 0.0f,
            endX = 500.0f,
        )
    Text(
        "Text with gradient back",
        Modifier.background(brush = gradientBrush, shape = CutCornerShape(8.dp)).padding(10.dp),
    )
}
```