gradient-design

Apply a linear-gradient as the element's background, then use -webkit-background-clip: text and -webkit-text-fill-color: transparent so the gradient shows through the letterforms. Use large, heavy font weights since gradients lose legibility on small text.

Animate the begin and end Alignment values of a LinearGradient using an AnimationController with TweenSequence, then rebuild via AnimatedBuilder. Flutter cannot animate gradient colors directly, so animating alignment creates the motion effect.

No, React Native has no built-in gradient text support. You must combine @react-native-masked-view/masked-view with expo-linear-gradient or react-native-linear-gradient, masking a LinearGradient with a Text node.

Pass a Brush into Modifier.border(width, brush, shape) along with a RoundedCornerShape. Compose's Brush API also works directly in TextStyle for gradient text and in Modifier.background for gradient fills.

Blending complementary colors like red directly to green produces a muddy brown midpoint. Blend through an intermediate analogous color instead, such as red to yellow to green, and prefer multi-stop gradients with three or four colors.

Avoid gradients on tiny text or thin icons because legibility drops immediately. Keep the surrounding layout minimal with glass panels or solid cards so the gradients remain the primary visual focus, and verify contrast ratios separately.