W
WhiteArray
Sign In

Flutter Gradient Generator

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

CSS Gradient Builder

Presets:
CSSTailwindReact NativeFlutterSwiftUIAndroid
LinearGradient(
  begin: Alignment(-1.00, 0.00),
  end: Alignment(1.00, 0.00),
  colors: [
    Color(0xFF3B82F6),
    Color(0xFF8B5CF6)
  ],
)
deg
0°Angle360°

Color Stops

HEX

The Ultimate Flutter 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 Alignment vectors. This generator does that math for you, outputting precise code for Flutter.

Gradients in Flutter

Flutter provides excellent built-in support for both LinearGradient and RadialGradient within the BoxDecoration class. Flutter uses an Alignment(x, y) coordinate system ranging from -1.0 to 1.0 (where 0,0 is the center). This tool handles the mathematical conversion from a standard CSS degree angle to the exact Flutter Alignment offsets needed to recreate the effect perfectly.

Related Tools

CSS Shadow GeneratorFavicon & App Icon GeneratorGlassmorphism Generator