Interactive previews iPhone

Color Gradient

The Color gradient modifier

Color Gradient - iOS on iPhone - Portrait - Flat Design - 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
Connect Wizard

Connect Wizard

Unlock insights App Store Connect doesn’t show you.

Get Started

More Color Components

View all
Color Opacity - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
style

Color Opacity

The Color opacity modifier

UIKit Separator Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Separator Colors

The UIKit separator colors that are also used in other components, such as the TextField

UIKit Content Background colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Content Background colors

The UIKit colors that are also used in other components like in List and GroupBox

UIKit Text Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Text Colors

The UIKit text colors that are also used in other components, such as the TextField

UIKit Fill Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Fill Colors

UIKit Label Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Label Colors

Color Variants - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Color Variants

HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles

Semantic Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

Semantic Colors

Explore Other Components

Browse all
Tab View Side Bar Header - iPadOS - Landscape - Liquid Glass - Light Mode - Preview
modifier

Tab View Side Bar Header

Adds a custom header to the sidebar of a tab view.

Context Menu - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

Context Menu

Adds a context menu to a view.

Title Toolbar Item Placement - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializers

Title Toolbar Item Placement

Places content in the title area

Increased Header Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Increased Header Prominence

Sets the header prominence to increased for this view.

ToolbarItem Shared Background Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

ToolbarItem Shared Background Visibility

Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping

ToolbarSpacer - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

ToolbarSpacer

A standard space item in toolbars

Disclosure Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

Disclosure Group

A view that shows or hides another content view, based on the state of a disclosure control.

WheelDatePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

WheelDatePickerStyle

A date picker style that displays each component as columns in a scrollable wheel