---
description: standard gradient for the color.
---

# color.gradient

[SwiftUI](../../..) ⟩ [shapes](../..) ⟩ [ShapeStyle](..) ⟩ [Color]() ⟩ <mark style="color:purple;">`.gradient`</mark>&#x20;

{% hint style="info" %}
color's standard gradient.
{% endhint %}

<figure><img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FvR8Z7pkTTT6PESNlhpDj%2Fstandard%20gradient.jpeg?alt=media&#x26;token=5d7639db-7dd5-468b-870b-6bc77cc7902f" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="📘 手冊" %}
* SwiftUI ⟩ [Color](https://developer.apple.com/documentation/swiftui/color) ⟩ [.gradient](https://developer.apple.com/documentation/swiftui/color/gradient)：standard gradient for the color.
{% endtab %}

{% tab title="👥 相關" %}
* [shadow](../../../view/drawing/shadow "mention")
* [gradient](../gradient "mention")
{% endtab %}

{% tab title="💾 程式" %}
{% tabs %}
{% tab title="StandardGradientView" %}
```swift
import SwiftUI

struct StandardGradientView: View {

    let spacing: CGFloat = 8
    let width: CGFloat = 80    // column width
    
    // 8 columns
    var columns: [GridItem] {
        // ⭐️ last GridItem's spacing is ignored.
        Array(
            repeating: GridItem(
                .fixed(width),        // ⭐️ fixed width
                spacing: spacing+6    // spacing to next column
            ), 
            count: 8
        )
    }
    
    var body: some View {
        // ⭐️ lazy v grid
        LazyVGrid(columns: columns, spacing: spacing) { // spacing between rows
            ForEach(Color.standardColors, id: \.self) { color in
                ColorSwatch(color: color, size: 80)
            }
        }.padding() 
    }
}

// previews
struct StandardGradientView_Previews: PreviewProvider {
    static var previews: some View {
        StandardGradientView()
    }
}
```
{% endtab %}

{% tab title="ColorSwatch" %}
```swift
import SwiftUI

struct ColorSwatch: View {
    
    let color: Color        
    let size: CGFloat    // swatch size
    
    var body: some View {
        VStack {
            
            Rectangle()
                .fill(color.gradient.shadow(.inner(
                    color: .bg2, radius: 2, x: 2, y: -2
                )))
                .frame(width: size, height: size)
                .border(Color.bg3)    // Color + system colors
            
            Text("\(color)")
                .font(.system(size: 14))
                .fixedSize()            // ⭐️ no wrap
        }
        .padding(4)
        .border(Color.bg3)
    }
}
```
{% endtab %}

{% tab title="⬆️ 需要" %}
* [system](../../../../custom/ext/color+/system "mention")
{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}

