Gold and Silver metallic gradients in SwiftUI

Recently I added support for precious metals in Bitfolio and I wanted to display their card with a metallic effect, for that nice premium feeling!

Like any experienced developer, my first thought was to just look online, pretty sure someone already solved this problem and shared online.

It was harder than expected but eventually I found a japanese blog having a good example and a nice gradient and providing a handy extension.

The implementation is below, and you can check out the article here:

> // 例: 金色のテキスト "GOLD" 

> Text("GOLD") .shine(.gold) 

> // 例: 銀色の四角形 

>  Rectangle() .shine(.silver)

It simple and works well.

I’ve tweaked the colors a bit and added a Platinum color.

I didn’t use the extension but applied the gradient directly to the background of the view since I wanted to show text on top of it.

Here is tweaked code:

enum CommodityColor {
    case gold
    case silver
    case platinum
    case bronze
    var colors: [Color] {
        switch self {
        case .gold: return [ Color(hex: 0xDBB400),
                             Color(hex: 0xEFAF00),
                             Color(hex: 0xF5D100),
                             Color(hex: 0xF5D100),
                             Color(hex: 0xD1AE15),
                             Color(hex: 0xDBB400),
        ]
            
        case .silver: return [ Color(hex: 0x70706F),
                               Color(hex: 0x7D7D7A),
                               Color(hex: 0xB3B6B5),
                               Color(hex: 0x8E8D8D),
                               Color(hex: 0xB3B6B5),
                               Color(hex: 0xA1A2A3),
        ]
            
        case .platinum: return [ Color(hex: 0x000000),
                               Color(hex: 0x444444),
                               Color(hex: 0x000000),
                               Color(hex: 0x444444),
                               Color(hex: 0x111111),
                               Color(hex: 0x000000),
        ]
            
        case .bronze: return [ Color(hex: 0x804A00),
                               Color(hex: 0x9C7A3C),
                               Color(hex: 0xB08D57),
                               Color(hex: 0x895E1A),
                               Color(hex: 0x804A00),
                               Color(hex: 0xB08D57),
        ]}
    }
    
    var linearGradient: LinearGradient
    {
        return LinearGradient(
            gradient: Gradient(colors: self.colors),
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
    }
}

And then to implemenet is as simple as:

.background(CommodityColor.gold.linearGradient)

This is how it looks like:

Metallic cards in Bitfolio app

To see it in action, just install the Bitfolio app (free), search and add a precious metal to your watchlist.