---
title: "meshGradient"
description: "A MeshGradient is a 2D grid of patches defined by vertices."
type: "modifier"
lastmod: "2026-05-08T01:17:02.963927Z"
---
## API Reference

### meshGradient

> Source set: Common

```kotlin
fun Modifier.meshGradient(
    @IntRange(from = 1) rows: Int,
    @IntRange(from = 1) columns: Int,
    hasBicubicColor: Boolean = false,
    block: MeshGradientScope.() -> Unit,
) = this.then(MeshGradientBlockModifierElement(rows, columns, hasBicubicColor, block))
```

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 modifier's 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 bilinear interpolation. |
| block | Lambda invoked to configure the mesh. Use the provided [MeshGradientScope](/jetpack-compose/androidx.compose.ui/ui/classes/MeshGradientScope) to set the properties of each vertex. |

## Code Examples
### MeshGradientModifierSample
```kotlin
@Composable
fun MeshGradientModifierSample() {
    val rows = 1
    val columns = 1
    Box(
        Modifier.size(300.dp).meshGradient(rows, columns) {
            // (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
        }
    )
}
```