Gradient → Code

Translate a CSS gradient into SwiftUI, Android, and Flutter code

2 credits
linear-gradient(135deg, #6366f1, #ec4899, #f59e0b)

Type

135°

Stops (3)

Code · CSS · SwiftUI · Flutter · Android
/* CSS */
background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);

/* SwiftUI */
LinearGradient(
  gradient: Gradient(colors: [
    Color(hex: "6366f1") // stop 0
    Color(hex: "ec4899") // stop 1
    Color(hex: "f59e0b") // stop 2
  ]),
  startPoint: .topLeading,
  endPoint: .bottomTrailing
)

/* Flutter */
LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [Color(0xFF6366F1), Color(0xFFEC4899), Color(0xFFF59E0B)],
)

<!-- Android XML -->
<gradient
  android:type="linear"
  android:angle="135"
  android:startColor="#6366f1"
  android:endColor="#f59e0b"/>

Sign in to save to history