---
title: "MeshGradientPainter"
description: "A MeshGradient is a 2D grid of patches defined by vertices."
type: "class"
lastmod: "2026-05-20T01:13:53.338901Z"
---
## API Reference

> Source set: Common

```kotlin
class MeshGradientPainter
@RememberInComposition
constructor(
@param:IntRange(from = 1) private val rows: Int,
@param:IntRange(from = 1) private val columns: Int,
private val hasBicubicColor: Boolean = false,
private val block: MeshGradientScope.() -> Unit,
) : Painter()
```

A MeshGradient is a 2D grid of patches defined by vertices. Each vertex has a position, color,
and four optional Bezier control points (tangents) that define the curvature of the edges
connecting neighboring vertices.

**Grid Dimensions:** For a given [rows](/jetpack-compose/androidx.compose.foundation/foundation-layout/functions/rows) and [columns](/jetpack-compose/androidx.compose.foundation/foundation-layout/functions/columns) (representing the number of patches), there
are a total of `(rows + 1) * (columns + 1)` vertices. For example, a 1x1 mesh consists of 4
vertices forming a single rectangular patch.

**Coordinate System:** All positions and Bezier offsets use a **normalized coordinate system**
where (0,0) is the top-left and (1,1) is the bottom-right of the drawing bounds.

**Bezier Tangents:** Bezier control points are provided as an [Offset](/jetpack-compose/androidx.compose.ui/ui-geometry/classes/Offset) relative to the vertex
position. The default value of a Bezier control point is `Offset.Unspecified`. If a control point
is `Offset.Unspecified`, the renderer automatically infers a tangent based on the neighboring
vertices to ensure C1 continuity (smooth transitions) across patches.

#### Parameters

| | |
| --- | --- |
| rows | The number of patches along the vertical axis. Must be at least 1. |
| columns | The number of patches along the horizontal axis. Must be at least 1. |
| hasBicubicColor | When true, uses Catmull-Rom interpolation for colors, resulting in smoother transitions compared to simpler and slightly faster bilinear interpolation. |
| block | Lambda invoked to configure the mesh. Use the provided [MeshGradientScope](/jetpack-compose/androidx.compose.ui/ui/interfaces/MeshGradientScope) to set the properties of each vertex. This block is executed in a [DrawScope](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/DrawScope) and hence can observe reads to any mutable state. Any unconfigured vertex will have a default position of `Offset.Zero` and a default color of `Color.Transparent`. |

## Code Examples

### MeshGradientPainterSample
```kotlin
@Composable
fun MeshGradientPainterSample() {
    val gradientPainter = remember {
        MeshGradientPainter(1, 1, hasBicubicColor = true) {
            // (row, column, position, color)
            setVertex(
                0,
                0,
                Offset(0f, 0f),
                Color.Red,
                rightControlPoint = Offset(0.5f, 0.5f),
            ) // Top-Left
            setVertex(0, 1, Offset(1f, 0f), Color.Blue) // Top-Right
            setVertex(1, 0, Offset(0f, 1f), Color.Green) // Bottom-Left
            setVertex(1, 1, Offset(1f, 1f), Color.Yellow) // Bottom-Right
        }
    }
    Box(Modifier.fillMaxSize().paint(gradientPainter))
}
```