AppGradientBackground

A gradient background for select screens. Uses LocalGradientColors to set the gradient colors of a Box within a Surface.

A decorative gradient background with top and bottom color fades at an 11.06-degree angle. Use for hero sections, onboarding screens, or feature highlights.

Features:

• Dual gradient (top fades out at 72.4%, bottom fades in at 25.5%)

• Angled at 11.06 degrees for visual interest

• Theme-aware gradient colors from LocalGradientColors

• Container background with gradient overlay

Usage Example:

@Composable
fun OnboardingScreen() {
    AppGradientBackground(
        gradientColors = GradientColors(
            top = Color(0xFF4CAF50),
            bottom = Color(0xFF2196F3),
            container = MaterialTheme.colorScheme.surface
        )
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center
        ) {
            Text("Welcome!", style = MaterialTheme.typography.displayLarge)
            Text("Get started with our app")
        }
    }
}

When to use:

• Onboarding or welcome screens

• Feature announcements or promotions

• Hero sections with visual emphasis

• Special event or seasonal theming

Parameters

See also