> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/shapes/shapestyle/color/gradient.md).

# color.gradient

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

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

<figure><img src="/files/uPmsapF5qqjaey3ze4ik" 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](/ios/swiftui/view/drawing/shadow.md)
* [Gradient](/ios/swiftui/shapes/shapestyle/gradient.md)
  {% 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 colors](/ios/custom/ext/color+/system.md)
  {% endtab %}
  {% endtabs %}
  {% endtab %}
  {% endtabs %}