[FEAT] LinearGradient, RadialGradient & AngularGradient by MiaKoring · Pull Request #450 · moreSwift/swift-cross-ui

MiaKoring · 2026-02-17T19:28:33Z

Summary

Added support for 3 types of gradients to be rendered as Views:

LinearGradient
RadialGradient
AngularGradient

Changes

SwiftCrossUI

added functions for creation and update of each gradient type to the AppBackend protocol.
added an ElementaryViewstruct for each type of gradient.
added a struct Angle intended for use by AngularGradient later
- gets also used by multiple backends for calculations
- added an initializer to create an Angle from a UnitPoint
added a struct UnitPoint, meant to represent a normalized point in a view’s coordinate space
- added static values for various points on a rectangle
- AppKitBackend views using it may need to flip the coordinates vertically, due to AppKit using a different coordinate origin point than the other major platforms.
- UnitPoints are not clamped, so you can use them with arbitrary values to benefit for example from Angle(origin:destination:)
added a struct Gradient, used by all implementations of a Gradient, its a gradient type agnostic representation of a color gradient
- added nested struct Gradient.Stop representing a color and its normalized position in the gradient
- added initializers taking [Color] or [Gradient.Stop]

AppKitBackend, UIKitBackend

Added implementations of the new AppBackend methods
Added separate Widget classes when needed (AppKit & UIKit)

WinUI, GtkBackend

Added implementation of the new AppBackend methods related to LinearGradient and RadialGradient

SwiftCrossUITests

Added Tests validating the initializers of Gradient
- even distribution of stops when supplied [Color]
- transparent stops when passed an empty array of Color (to make future support of addition possible and remove edgecases to check outside of Gradient)
- start and end stop of the same color when passed [Color] with one entry
- preservation of the order the colors are passed

Examples

Added GradientsExample
- added tab with examples for LinearGradient
- added tab with examples for RadialGradient
- added tab with examples for AngularGradient

Notes

WinUI 2 and 3 don’t support conic (angular) gradients yet. I currently don’t know what an alternative could be
This PR only adds support for rendering them as views directly. A future ShapeStyle could easily re-use the added structs tho.

TODO / Status

Added RadialGradient support to WinUIBackend (pending RadialGradientBrush generation)
“unavailable on WinUIBackend” documentation comment is removed from RadialGradient

MiaKoring · 2026-02-17T19:31:30Z

MiaKoring · 2026-02-17T19:34:01Z

Related issue: #427

MiaKoring · 2026-02-18T11:43:19Z

The new commit now offers full API parity to SwiftUI on AngularGradient and correctly renders all 6 test gradients. “Correct” meaning looking like the SwiftUI rendered result.

All 3 supported frameworks recieved this change and the shared screenshots were updated.

MiaKoring · 2026-02-18T15:58:49Z

Outstanding Tasks have been completed, this can now be reviewed and merged

stackotter

Thanks for tackling this feature! I've reviewed all of the code now, but I haven't tested anything locally yet. I plan to construct a SwiftUI app with a bunch of edge cases that I have thought of, and then compile that with your PR and ensure that all of the edge cases act the same across platforms. It should be a useful tool to help you address some of my PR comments too. I likely won't get around to doing that today though.

# Conflicts: # Examples/Bundler.toml # Examples/Package.resolved # Examples/Package.swift # Package.resolved # Package.swift # Sources/SwiftCrossUI/Backend/AppBackend.swift

MiaKoring · 2026-05-03T17:30:18Z

conflicts should be resolved now, same for all requested changes without open discussion

…oss-ui into feat/gradient

stackotter

Thanks for applying all that feedback! I've got a few more things, but I think most of them are relatively small things this time (organisation, documentation, etc). I don't have time to test things locally right now, but I will try to do that soon, because I may be able to resolve some of my own questions and comments by testing out the edge cases that I'm worried about.

stackotter · 2026-05-06T05:42:44Z

+
+        #if DEBUG
+            if range < 0 {
+                logger.warning(


I think it's easy enough for us to support right? Because we can just automatically reverse the gradient. Use cases where it's probably most applicable would be graphical editors where the user is entering the radii with draggable handles or something similar. I assume some backends that don't use adjustedStops may already support having the radii swapped?

Gtk upcoming

MiaKoring · 2026-05-06T13:23:34Z

GtkBackend will not support the AngularGradient type right now due to rendering inconsistencies with SwiftUI and the Apple Backends which are not easily resolvable.

For future reference if needed:

public func createAngularGradient() -> Widget {
    Box()
}

public func updateAngularGradient(
    _ widget: Widget,
    gradient: AngularGradient,
    withSize size: SIMD2<Int>,
    in environment: EnvironmentValues
) {
    let widget = widget as! Box

    let adjustedStops = gradient.adjustedStops

    let stops = adjustedStops.map { stop in
        let resolved = stop.color.resolve(in: environment)
        let red = resolved.red * 255
        let green = resolved.green * 255
        let blue = resolved.blue * 255
        
        let location = stop.location * 360
        
        return "rgba(\(red), \(green), \(blue), \(resolved.opacity)) \(location)deg”
    }.joined(separator: ", “)
    
    let startDegrees = gradient.startAngle.degrees + 90
    let centerXPercent = gradient.center.x * 100
    let centerYPercent = gradient.center.y * 100

    widget.css.set(
        property: .init(
            key: “background”,
            value: “””
                conic-gradient(from \(startDegrees)deg \
                at \(centerXPercent)% \(centerYPercent)%, \
                \(stops))
                “””
        )
    )
}

…to feat/gradient # Conflicts: # Examples/Package.resolved

…oss-ui into feat/gradient

MiaKoring · 2026-05-06T14:08:42Z

I believe I’m caught up. main is merged again too.

stackotter

Thanks for resolving those comments, the implementation looks great now. My feedback this time is purely formatting and documentation wording, so this should be the home straight.

I believe the @bbrk24 was having issues with Xcode adding additional trailing whitespace indents, so maybe some default setting has changed recently?

stackotter · 2026-05-08T02:50:11Z

 struct GradientsApp: App {
    static let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple]
-
+    


This file has ended up with a lot of trailing whitespace added. Maybe Xcode did it?

stackotter · 2026-05-08T02:50:16Z


 #if canImport(SwiftBundlerRuntime)
-    import SwiftBundlerRuntime
+import SwiftBundlerRuntime


Indent one level

stackotter · 2026-05-08T02:56:58Z

+        ///   - widget: The widget to update.
+        ///   - gradient: The SwiftCrossUI struct housing the information for the gradient's rendering.
+        ///   - size: The new size of the widget.
+        ///   - environment: The widgets environment, used to resolve its colors.


stackotter · 2026-05-08T02:57:16Z

+        ///   - widget: The widget to update.
+        ///   - gradient: The SwiftCrossUI struct housing the information for the gradient's rendering.
+        ///   - size: The new size of the widget.
+        ///   - environment: The widgets environment, used to resolve its colors.


stackotter · 2026-05-08T02:58:01Z

@@ -0,0 +1,22 @@
+extension BackendFeatures {
+    /// Backend Methods for Angular (conic) Gradients


Don't need to capitalise the Methods here, or the Angular and Gradients either

stackotter · 2026-05-08T03:07:17Z

    /// Creates an angular gradient that completes a partial rotation.
    ///
-    /// Stops are expected to be in 360° unit space.
+    /// For ``Gradient.Stop`` location of 0 corresponds to 0° and 1 to 360°.


/// For each ``Gradient.Stop``, a location of 0 corresponds to 0°, and a location of 1 corresponds to 360°.

stackotter · 2026-05-08T03:08:17Z

    /// The radius at which the first gradient stop will be placed.
    ///
-    /// All space outside inside radius gets filled with the color of the first gradient stop.
+    /// All space inside radius gets filled with the color of the first gradient stop.


inside this radius

stackotter · 2026-05-08T03:08:26Z

    /// The normalized center point of the gradient in its coordinate space.
    public let center: UnitPoint
-
+    


Trailing whitespace

stackotter · 2026-05-08T03:10:29Z

    }
-
-    public func updateLinearGradient(
+    


Trailing whitespace

stackotter · 2026-05-08T03:13:23Z

        let widget = widget as! Box
-
-        let stops = cssStops(gradient: gradient.gradient, environment: environment)
+        let stops = gradient.startRadius < gradient.endRadius ?


Wrap the ternary like this;

let stops = gradient.startRadius < gradient.endRadius ? gradient.gradient.stops : invertedStops(stops: gradient.gradient.stops)

MiaKoring added 8 commits February 16, 2026 22:16

AppKitBackend support for 3 gradient types

4c9ce0a

Gtk diagonal is weird

245eac4

Fixed AppKit LinearGradient, full gradient support on GtkBackend

84f4c4a

added UIKit support

f794f2a

Added LinearGradient on Windows

02a582c

Added Unit Tests for Gradient

6341eea

Added Documentation Comments

299236a

Added WinUI unavailability comment

8a4aa9f

Improved AngularGradient support

faf4d1a

MiaKoring added 4 commits February 18, 2026 13:40

improved custom angle support on negative ranges and added tests

18e38da

Added documentation comments

eb60df3

Added RadialGradient support to WinUI

a93574c

Added tests for RadialGradient.adjustedStops

baf95f5

MiaKoring marked this pull request as ready for review February 18, 2026 15:53

stackotter requested changes Feb 23, 2026

View reviewed changes

MiaKoring added 7 commits February 25, 2026 20:30

Resolved part of the requested changes

b01ab68

changed shorthand init to full named init

91b12fd

Merge branch 'main' into feat/gradient

c9c7fc2

# Conflicts: # Examples/Bundler.toml # Examples/Package.resolved # Examples/Package.swift # Package.resolved # Package.swift # Sources/SwiftCrossUI/Backend/AppBackend.swift

fixed conflicts

ff338f2

fixes WinUIBackend

a720164

some requested changes

18de987

remaining requested changes without ongoing discussion

dc415ea

MiaKoring added 2 commits May 3, 2026 19:38

fix unit test

2a15ea2

Merge branch 'feat/gradient' of https://github.com/MiaKoring/swift-cr…

87f5fe8

…oss-ui into feat/gradient

stackotter requested changes May 6, 2026

View reviewed changes

MiaKoring added 3 commits May 6, 2026 13:08

Improvements to RadialGradient correctness on WinUI, AppKit, UIKit

a011e60

Gtk upcoming

Fixed Gtk RadialGradient when startLocation > endLocation

3e750f0

fixed winui

a134287

MiaKoring mentioned this pull request May 6, 2026

[Bug] Gtk List NavigationSplitView makes weird size decisions #556

Open

MiaKoring added 3 commits May 6, 2026 15:57

finished implementing requested changes

23f4a5d

Merge branch 'main' of https://github.com/MiaKoring/swift-cross-ui in…

380bab4

…to feat/gradient # Conflicts: # Examples/Package.resolved

Merge branch 'feat/gradient' of https://github.com/MiaKoring/swift-cr…

6ca808b

…oss-ui into feat/gradient

MiaKoring requested a review from stackotter May 6, 2026 18:16

stackotter requested changes May 8, 2026

View reviewed changes

		struct GradientsApp: App {
		static let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple]

		@@ -0,0 +1,22 @@
		extension BackendFeatures {
		/// Backend Methods for Angular (conic) Gradients

		/// The normalized center point of the gradient in its coordinate space.
		public let center: UnitPoint

Uh oh!

Conversation

MiaKoring commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

SwiftCrossUI

AppKitBackend, UIKitBackend

WinUI, GtkBackend

SwiftCrossUITests

Examples

Notes

TODO / Status

Uh oh!

MiaKoring commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MiaKoring commented Feb 17, 2026

Uh oh!

MiaKoring commented Feb 18, 2026

Uh oh!

MiaKoring commented Feb 18, 2026

Uh oh!

stackotter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MiaKoring commented May 3, 2026

Uh oh!

stackotter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MiaKoring commented May 6, 2026

Uh oh!

MiaKoring commented May 6, 2026

Uh oh!

stackotter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

MiaKoring commented Feb 17, 2026 •

edited

Loading

MiaKoring commented Feb 17, 2026 •

edited

Loading