Sign In

React Native Gradient Generator

Visually generate beautiful linear and radial gradients and instantly export exact code for React Native.

CSS Gradient Builder

Presets:
<LinearGradient
  colors={["#3b82f6", "#8b5cf6"]}
  start={{ x: 0, y: 0.5 }}
  end={{ x: 1, y: 0.5 }}
/>
deg
Angle360°

Color Stops

HEX

The Ultimate React Native Gradient Generator

Gradients are a fundamental design element used to create vibrant backgrounds, text effects, and depth. However, translating a simple CSS gradient (like linear-gradient(135deg, blue, red)) into native mobile code requires complex trigonometry to convert the angle into starting and ending coordinate vectors. This generator does that math for you, outputting precise code for React Native.

Gradients in React Native

React Native does not support gradients out of the box in its core library. To use the code generated here, you will need to install the popular expo-linear-gradient package (if using Expo) or react-native-linear-gradient. These libraries take an array of colors and a `start` and `end` point defined as `{ x, y }` coordinates between 0.0 and 1.0. Our tool automatically converts CSS angles to these coordinates. Note that native radial gradients are not supported by these libraries.

Related Tools