Color Gradient

The Color gradient modifier

Color Gradient - iOS Light Mode Preview

Platform Compatibility

iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 9.0+ tvOS 16.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs 
VStack {
  HStack {
    smallRect
      .foregroundStyle(.blue)
    smallRect
      .foregroundStyle(.blue.secondary)
    smallRect
      .foregroundStyle(.blue.tertiary)
    smallRect
      .foregroundStyle(.blue.quaternary)
    smallRect
      .foregroundStyle(.blue.quinary)
  }
  HStack {
    smallRect
      .foregroundStyle(.blue.gradient)
    smallRect
      .foregroundStyle(.blue.gradient.secondary)
    smallRect
      .foregroundStyle(.blue.gradient.tertiary)
    smallRect
      .foregroundStyle(.blue.gradient.quaternary)
    smallRect
      .foregroundStyle(.blue.gradient.quinary)
  }
  HStack {
    smallRect
      .foregroundStyle(.blue.gradient.opacity(0.9))
    smallRect
      .foregroundStyle(.blue.gradient.opacity(0.7))
    smallRect
      .foregroundStyle(.blue.gradient.tertiary.opacity(0.5))
    smallRect
      .foregroundStyle(.blue.gradient.quaternary.opacity(0.3))
    smallRect
      .foregroundStyle(.blue.gradient.quinary.opacity(0.1))
  }
}

Found an issue or have a suggestion?

Created: May 29, 2025Updated: May 30, 2025