About Gradient → Code

Translate a CSS gradient into SwiftUI, Android, and Flutter code. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Porting a web gradient design to a native iOS SwiftUI app
• Converting CSS gradients to Flutter for cross-platform development
• Maintaining consistent gradient styling across web and mobile apps
• Translating designer-provided CSS into Android Jetpack Compose code

Tips

• Define your CSS gradient and get SwiftUI and Flutter equivalents
• Adjust stop positions to fine-tune the gradient appearance
• Compare the generated code across all three platforms side by side

Fun Facts

• CSS gradients were first implemented by WebKit in 2008 using a proprietary syntax; the standard linear-gradient() syntax wasn't finalized until 2012.
• SwiftUI's LinearGradient struct was introduced with SwiftUI at WWDC 2019, replacing the more verbose CAGradientLayer from Core Animation.
• Flutter uses a Gradient class that maps closely to the CSS model, but its coordinate system uses Alignment values from -1.0 to 1.0 instead of angles.

FAQ

Which platforms?

SwiftUI (LinearGradient), Android (Jetpack Compose Brush), Flutter (LinearGradient), plus JavaScript Canvas and SVG code. Same gradient, native code for each.

Are the gradients pixel-identical?

Visually yes. Different rendering engines have subtle differences in interpolation; for pixel-exact matching use identical color spaces.

What about radial and conic?

Radial supported on all platforms. Conic is CSS-only — simulated on native platforms with rotated linear gradients or shaders.

Does it handle multi-stop gradients?

Yes — unlimited stops. Each platform's syntax varies but the tool generates the correct structure for each.