Compose Gradients

Jetpack Compose Gradient #61

Remix

Color Stops

Stop Preview Hex Compose Color
0%
13%
25%
38%
50%
62%
75%
87%
100%

Jetpack Compose Code

Modifier.drawWithCache {
    val angle = Math.toRadians(90.0)
    val direction = Offset(sin(angle).toFloat(), -cos(angle).toFloat())
    val length = size.width * abs(direction.x) + size.height * abs(direction.y)
    val brush = Brush.linearGradient(
        colorStops = arrayOf(
            0f to Color(0xFF3F51B1),
            0.13f to Color(0xFF5A55AE),
            0.25f to Color(0xFF7B5FAC),
            0.38f to Color(0xFF8F6AAE),
            0.5f to Color(0xFFA86AA4),
            0.62f to Color(0xFFCC6B8E),
            0.75f to Color(0xFFF18271),
            0.87f to Color(0xFFF3A469),
            1f to Color(0xFFF7C978)
        ),
        start = size.center - direction * (length / 2f),
        end = size.center + direction * (length / 2f)
    )
    onDrawBehind { drawRect(brush) }
}