index

Expo Linear Gradient Generator
Create beautiful gradients for your React Native apps
Preview
Gradient Border
Colors & Locations
Location
Location
+ Add Color
Direction
Start X
Start Y
End X
End Y
Border (Only for Gradient Border)
Border Width
Border Radius
Presets
Linear Gradient Code Output
<LinearGradient locations={[0,1]} end={{"x":1,"y":0}} start={{"x":0,"y":0}} style={styles.gradient} colors={["#00C9FF","#92FE9D"]} />
Copy Code
Gradient Border Code Output
import { LinearGradient } from "expo-linear-gradient"; import { StyleSheet, View, Text } from "react-native"; const GradientBorderView = () => { return ( <View style={styles.previewContainer}> <LinearGradient style={styles.gradient} end={{"x":1,"y":0}} start={{"x":0,"y":0}} colors={["#00C9FF","#92FE9D"]} locations={[0,1]} > <View style={styles.innerContainer}> <Text>Gradient Border</Text> </View> </LinearGradient> </View> ); }; const styles = StyleSheet.create({ previewContainer: { height: 300, width: "100%", overflow: "hidden", borderRadius: 24 }, innerContainer: { flex: 1, padding: 16, margin: 6, backgroundColor: 'white', borderRadius: 18 }, gradient: { flex: 1, width: "100%", height: "100%", }, }); export default GradientBorderView;
Copy Code
Burhan YILMAZ
React Native Developer
Passionate React Native developer creating beautiful and functional mobile applications. Specialized in cross-platform development with React Native and Expo.