1# CSS Gradients
2 
3> **New Architecture Only**: CSS gradients require React Native's New Architecture (Fabric). They are not available in the old architecture or Expo Go.
4 
5Use CSS gradients with the `experimental_backgroundImage` style property.
6 
7## Linear Gradients
8 
9```tsx
10// Top to bottom
11<View style={{
12  experimental_backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)'
13}} />
14 
15// Left to right
16<View style={{
17  experimental_backgroundImage: 'linear-gradient(to right, #ff0000 0%, #0000ff 100%)'
18}} />
19 
20// Diagonal
21<View style={{
22  experimental_backgroundImage: 'linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)'
23}} />
24 
25// Using degrees
26<View style={{
27  experimental_backgroundImage: 'linear-gradient(135deg, transparent 0%, black 100%)'
28}} />
29```
30 
31## Radial Gradients
32 
33```tsx
34// Circle at center
35<View style={{
36  experimental_backgroundImage: 'radial-gradient(circle at center, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%)'
37}} />
38 
39// Ellipse
40<View style={{
41  experimental_backgroundImage: 'radial-gradient(ellipse at center, #fff 0%, #000 100%)'
42}} />
43 
44// Positioned
45<View style={{
46  experimental_backgroundImage: 'radial-gradient(circle at top left, #ff0000 0%, transparent 70%)'
47}} />
48```
49 
50## Multiple Gradients
51 
52Stack multiple gradients by comma-separating them:
53 
54```tsx
55<View style={{
56  experimental_backgroundImage: `
57    linear-gradient(to bottom, transparent 0%, black 100%),
58    radial-gradient(circle at top right, rgba(255, 0, 0, 0.5) 0%, transparent 50%)
59  `
60}} />
61```
62 
63## Common Patterns
64 
65### Overlay on Image
66 
67```tsx
68<View style={{ position: 'relative' }}>
69  <Image source={{ uri: '...' }} style={{ width: '100%', height: 200 }} />
70  <View style={{
71    position: 'absolute',
72    inset: 0,
73    experimental_backgroundImage: 'linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%)'
74  }} />
75</View>
76```
77 
78### Frosted Glass Effect
79 
80```tsx
81<View style={{
82  experimental_backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)',
83  backdropFilter: 'blur(10px)',
84}} />
85```
86 
87### Button Gradient
88 
89```tsx
90<Pressable style={{
91  experimental_backgroundImage: 'linear-gradient(to bottom, #4CAF50 0%, #388E3C 100%)',
92  padding: 16,
93  borderRadius: 8,
94}}>
95  <Text style={{ color: 'white', textAlign: 'center' }}>Submit</Text>
96</Pressable>
97```
98 
99## Important Notes
100 
101- Do NOT use `expo-linear-gradient` — use CSS gradients instead
102- Gradients are strings, not objects
103- Use `rgba()` for transparency, or `transparent` keyword
104- Color stops use percentages (0%, 50%, 100%)
105- Direction keywords: `to top`, `to bottom`, `to left`, `to right`, `to top left`, etc.
106- Degree values: `45deg`, `90deg`, `135deg`, etc.
107