Sign In

SwiftUI Gradient Generator

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

CSS Gradient Builder

Presets:
LinearGradient(
  gradient: Gradient(colors: [
    Color(hex: "#3b82f6"),
    Color(hex: "#8b5cf6")
  ]),
  startPoint: UnitPoint(x: 0, y: 0.5),
  endPoint: UnitPoint(x: 1, y: 0.5)
)
deg
Angle360°

Color Stops

HEX

The Ultimate SwiftUI 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 SwiftUI.

Whether you are building a modern web application or a cross-platform mobile app, achieving the perfect color transition is essential for a premium user interface. WhiteArray's visual builder allows you to drag, drop, and rotate gradient stops intuitively. Once you're satisfied with the design, our engine instantly compiles the visual representation into production-ready code.

Gradients in SwiftUI

SwiftUI makes gradients incredibly elegant. The LinearGradient struct requires a startPoint and endPoint using UnitPoint(x: CGFloat, y: CGFloat). This tool computes these points based on your selected visual angle. It also generates Color(hex: "...") structures, which assumes you have a standard hex-to-Color extension in your SwiftUI codebase.

Frequently Asked Questions

Can I copy the code directly into my SwiftUI project?

Yes. The output generated by this tool is strictly formatted for SwiftUI. Simply click the copy button and paste the code directly into your stylesheet, component, or widget.

Are radial gradients supported?

Radial gradients are fully supported for web technologies like CSS and Tailwind, as well as native frameworks like Flutter and Android Compose that natively support them.

Related Tools