<!--
{
  "availability" : [
    "iOS: 13.0.0 -",
    "iPadOS: 13.0.0 -",
    "macCatalyst: 13.0.0 -",
    "macOS: 10.15.0 -",
    "tvOS: 13.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 6.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/ShapeStyle",
  "metadataVersion" : "0.1.0",
  "role" : "Protocol",
  "symbol" : {
    "kind" : "Protocol",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI10ShapeStyleP"
  },
  "title" : "ShapeStyle"
}
-->

# ShapeStyle

A color or pattern to use when rendering a shape.

```
protocol ShapeStyle : Sendable
```

## Overview

You create custom shape styles by declaring a type that conforms to the
`ShapeStyle` protocol and implementing the required `resolve` function to
return a shape style that represents the desired appearance based on the
current environment.

For example this shape style reads the current color scheme from the
environment to choose the blend mode its color will be composited with:

```
struct MyShapeStyle: ShapeStyle {
    func resolve(in environment: EnvironmentValues) -> some ShapeStyle {
        if environment.colorScheme == .light {
            return Color.red.blendMode(.lighten)
        } else {
            return Color.red.blendMode(.darken)
        }
    }
}
```

In addition to creating a custom shape style, you can also use one of the
concrete styles that SwiftUI defines. To indicate a specific color or
pattern, you can use [`Color`](/documentation/SwiftUI/Color) or the style returned by
[`image(_:sourceRect:scale:)`](/documentation/SwiftUI/ShapeStyle/image(_:sourceRect:scale:)), or one of the gradient
types, like the one returned by
[`radialGradient(_:center:startRadius:endRadius:)`](/documentation/SwiftUI/ShapeStyle/radialGradient(_:center:startRadius:endRadius:)).
To set a color that’s appropriate for a given context on a given
platform, use one of the semantic styles, like [`background`](/documentation/SwiftUI/ShapeStyle/background) or
[`primary`](/documentation/SwiftUI/ShapeStyle/primary).

You can use a shape style by:

- Filling a shape with a style with the [`fill(_:style:)`](/documentation/SwiftUI/Shape/fill(_:style:))
  modifier:
  
  ```
  Path { path in
      path.move(to: .zero)
      path.addLine(to: CGPoint(x: 50, y: 0))
      path.addArc(
          center: .zero,
          radius: 50,
          startAngle: .zero,
          endAngle: .degrees(90),
          clockwise: false)
  }
  .fill(.radialGradient(
      Gradient(colors: [.yellow, .red]),
      center: .topLeading,
      startRadius: 15,
      endRadius: 80))
  ```
  
  ![A screenshot of a quarter of a circle filled with
  a radial gradient.](ShapeStyle-1)
- Tracing the outline of a shape with a style with either the
  [`stroke(_:lineWidth:)`](/documentation/SwiftUI/Shape/stroke(_:lineWidth:)) or the [`stroke(_:style:)`](/documentation/SwiftUI/Shape/stroke(_:style:)) modifier:
  
  ```
  RoundedRectangle(cornerRadius: 10)
      .stroke(.mint, lineWidth: 10)
      .frame(width: 200, height: 50)
  ```
  
  ![A screenshot of a rounded rectangle, outlined in mint.](ShapeStyle-2)
- Styling the foreground elements in a view with the
  [`foregroundStyle(_:)`](/documentation/SwiftUI/View/foregroundStyle(_:)) modifier:
  
  ```
  VStack(alignment: .leading) {
      Text("Primary")
          .font(.title)
      Text("Secondary")
          .font(.caption)
          .foregroundStyle(.secondary)
  }
  ```
  
  ![A screenshot of a title in the primary content color above a
  subtitle in the secondary content color.](ShapeStyle-3)

## Topics

### System colors

[`black`](/documentation/SwiftUI/ShapeStyle/black)

A black color suitable for use in UI elements.

[`blue`](/documentation/SwiftUI/ShapeStyle/blue)

A context-dependent blue color suitable for use in UI elements.

[`brown`](/documentation/SwiftUI/ShapeStyle/brown)

A context-dependent brown color suitable for use in UI elements.

[`clear`](/documentation/SwiftUI/ShapeStyle/clear)

A clear color suitable for use in UI elements.

[`cyan`](/documentation/SwiftUI/ShapeStyle/cyan)

A context-dependent cyan color suitable for use in UI elements.

[`gray`](/documentation/SwiftUI/ShapeStyle/gray)

A context-dependent gray color suitable for use in UI elements.

[`green`](/documentation/SwiftUI/ShapeStyle/green)

A context-dependent green color suitable for use in UI elements.

[`indigo`](/documentation/SwiftUI/ShapeStyle/indigo)

A context-dependent indigo color suitable for use in UI elements.

[`mint`](/documentation/SwiftUI/ShapeStyle/mint)

A context-dependent mint color suitable for use in UI elements.

[`orange`](/documentation/SwiftUI/ShapeStyle/orange)

A context-dependent orange color suitable for use in UI elements.

[`pink`](/documentation/SwiftUI/ShapeStyle/pink)

A context-dependent pink color suitable for use in UI elements.

[`purple`](/documentation/SwiftUI/ShapeStyle/purple)

A context-dependent purple color suitable for use in UI elements.

[`red`](/documentation/SwiftUI/ShapeStyle/red)

A context-dependent red color suitable for use in UI elements.

[`teal`](/documentation/SwiftUI/ShapeStyle/teal)

A context-dependent teal color suitable for use in UI elements.

[`white`](/documentation/SwiftUI/ShapeStyle/white)

A white color suitable for use in UI elements.

[`yellow`](/documentation/SwiftUI/ShapeStyle/yellow)

A context-dependent yellow color suitable for use in UI elements.

### Angular gradients

[`static   angularGradient ( _ : center : startAngle : endAngle :)`](/documentation/SwiftUI/ShapeStyle/angularGradient(_:center:startAngle:endAngle:))

An angular gradient, which applies the color function as the
angle changes between the start and end angles, and anchored to
a relative center point within the filled shape.

[`angularGradient(colors:center:startAngle:endAngle:)`](/documentation/SwiftUI/ShapeStyle/angularGradient(colors:center:startAngle:endAngle:))

An angular gradient defined by a collection of colors.

[`angularGradient(stops:center:startAngle:endAngle:)`](/documentation/SwiftUI/ShapeStyle/angularGradient(stops:center:startAngle:endAngle:))

An angular gradient defined by a collection of color stops.

### Conic gradients

[`static   conicGradient ( _ : center : angle :)`](/documentation/SwiftUI/ShapeStyle/conicGradient(_:center:angle:))

A conic gradient that completes a full turn, optionally starting from
a given angle and anchored to a relative center point within the filled
shape.

[`conicGradient(colors:center:angle:)`](/documentation/SwiftUI/ShapeStyle/conicGradient(colors:center:angle:))

A conic gradient defined by a collection of colors that completes a full
turn.

[`conicGradient(stops:center:angle:)`](/documentation/SwiftUI/ShapeStyle/conicGradient(stops:center:angle:))

A conic gradient defined by a collection of color stops that completes a
full turn.

### Elliptical gradients

[`static   ellipticalGradient ( _ : center : startRadiusFraction : endRadiusFraction :)`](/documentation/SwiftUI/ShapeStyle/ellipticalGradient(_:center:startRadiusFraction:endRadiusFraction:))

A radial gradient that draws an ellipse.

[`ellipticalGradient(colors:center:startRadiusFraction:endRadiusFraction:)`](/documentation/SwiftUI/ShapeStyle/ellipticalGradient(colors:center:startRadiusFraction:endRadiusFraction:))

A radial gradient that draws an ellipse defined by a collection of
colors.

[`ellipticalGradient(stops:center:startRadiusFraction:endRadiusFraction:)`](/documentation/SwiftUI/ShapeStyle/ellipticalGradient(stops:center:startRadiusFraction:endRadiusFraction:))

A radial gradient that draws an ellipse defined by a collection of
color stops.

### Linear gradients

[`static   linearGradient ( _ : startPoint : endPoint :)`](/documentation/SwiftUI/ShapeStyle/linearGradient(_:startPoint:endPoint:))

A linear gradient.

[`linearGradient(colors:startPoint:endPoint:)`](/documentation/SwiftUI/ShapeStyle/linearGradient(colors:startPoint:endPoint:))

A linear gradient defined by a collection of colors.

[`linearGradient(stops:startPoint:endPoint:)`](/documentation/SwiftUI/ShapeStyle/linearGradient(stops:startPoint:endPoint:))

A linear gradient defined by a collection of color stops.

### Radial gradients

[`static   radialGradient ( _ : center : startRadius : endRadius :)`](/documentation/SwiftUI/ShapeStyle/radialGradient(_:center:startRadius:endRadius:))

A radial gradient.

[`radialGradient(colors:center:startRadius:endRadius:)`](/documentation/SwiftUI/ShapeStyle/radialGradient(colors:center:startRadius:endRadius:))

A radial gradient defined by a collection of colors.

[`radialGradient(stops:center:startRadius:endRadius:)`](/documentation/SwiftUI/ShapeStyle/radialGradient(stops:center:startRadius:endRadius:))

A radial gradient defined by a collection of color stops.

### Materials

[`ultraThinMaterial`](/documentation/SwiftUI/ShapeStyle/ultraThinMaterial)

A mostly translucent material.

[`thinMaterial`](/documentation/SwiftUI/ShapeStyle/thinMaterial)

A material that’s more translucent than opaque.

[`regularMaterial`](/documentation/SwiftUI/ShapeStyle/regularMaterial)

A material that’s somewhat translucent.

[`thickMaterial`](/documentation/SwiftUI/ShapeStyle/thickMaterial)

A material that’s more opaque than translucent.

[`ultraThickMaterial`](/documentation/SwiftUI/ShapeStyle/ultraThickMaterial)

A mostly opaque material.

[`bar`](/documentation/SwiftUI/ShapeStyle/bar)

A material matching the style of system toolbars.

### Image paint styles

[`image(_:sourceRect:scale:)`](/documentation/SwiftUI/ShapeStyle/image(_:sourceRect:scale:))

A shape style that fills a shape by repeating a region of an image.

### Hierarchical styles

[`secondary`](/documentation/SwiftUI/ShapeStyle/secondary-swift.property)

Returns the second level of this shape style.

[`tertiary`](/documentation/SwiftUI/ShapeStyle/tertiary-swift.property)

Returns the third level of this shape style.

[`quaternary`](/documentation/SwiftUI/ShapeStyle/quaternary-swift.property)

Returns the fourth level of this shape style.

[`quinary`](/documentation/SwiftUI/ShapeStyle/quinary-swift.property)

Returns the fifth level of this shape style.

[`primary`](/documentation/SwiftUI/ShapeStyle/primary)

A shape style that maps to the first level of the current content style.

[`secondary`](/documentation/SwiftUI/ShapeStyle/secondary-swift.type.property)

A shape style that maps to the second level of the current content style.

[`tertiary`](/documentation/SwiftUI/ShapeStyle/tertiary-swift.type.property)

A shape style that maps to the third level of the current content
style.

[`quaternary`](/documentation/SwiftUI/ShapeStyle/quaternary-swift.type.property)

A shape style that maps to the fourth level of the current content
style.

[`quinary`](/documentation/SwiftUI/ShapeStyle/quinary-swift.type.property)

A shape style that maps to the fifth level of the current content
style.

### Semantic styles

[`foreground`](/documentation/SwiftUI/ShapeStyle/foreground)

The foreground style in the current context.

[`background`](/documentation/SwiftUI/ShapeStyle/background)

The background style in the current context.

[`selection`](/documentation/SwiftUI/ShapeStyle/selection)

A style used to visually indicate selection following platform conventional
colors and behaviors.

[`separator`](/documentation/SwiftUI/ShapeStyle/separator)

A style appropriate for foreground separator or border lines.

[`tint`](/documentation/SwiftUI/ShapeStyle/tint)

A style that reflects the current tint color.

[`placeholder`](/documentation/SwiftUI/ShapeStyle/placeholder)

A style appropriate for placeholder text.

[`link`](/documentation/SwiftUI/ShapeStyle/link)

A style appropriate for links.

[`fill`](/documentation/SwiftUI/ShapeStyle/fill)

An overlay fill style for filling shapes.

[`windowBackground`](/documentation/SwiftUI/ShapeStyle/windowBackground)

A style appropriate for elements that should match the background
of their containing window.

### Modifying a shape style

[`blendMode(_:)`](/documentation/SwiftUI/ShapeStyle/blendMode(_:)-swift.method)

Returns a new style based on `self` that applies the specified
blend mode when drawing.

[`opacity(_:)`](/documentation/SwiftUI/ShapeStyle/opacity(_:)-swift.method)

Returns a new style based on `self` that multiplies by the
specified opacity when drawing.

[`shadow(_:)`](/documentation/SwiftUI/ShapeStyle/shadow(_:)-swift.method)

Applies the specified shadow effect to the shape style.

### Configuring the default shape style

[`blendMode(_:)`](/documentation/SwiftUI/ShapeStyle/blendMode(_:)-swift.type.method)

Returns a new style based on the current style that uses
`mode` as its blend mode when drawing.

[`opacity(_:)`](/documentation/SwiftUI/ShapeStyle/opacity(_:)-swift.type.method)

Returns a new style based on the current style that multiplies
by `opacity` when drawing.

[`shadow(_:)`](/documentation/SwiftUI/ShapeStyle/shadow(_:)-swift.type.method)

Returns a shape style that applies the specified shadow style to the
current style.

### Mapping to absolute coordinates

[`in(_:)`](/documentation/SwiftUI/ShapeStyle/in(_:))

Maps a shape style’s unit-space coordinates to the absolute coordinates
of a given rectangle.

### Resolving a shape style in an environment

[`resolve(in:)`](/documentation/SwiftUI/ShapeStyle/resolve(in:))

Evaluate to a resolved shape style given the current `environment`.

[`Resolved`](/documentation/SwiftUI/ShapeStyle/Resolved)

The type of shape style this will resolve to.

### Using a shape style as a view

[`body`](/documentation/SwiftUI/ShapeStyle/body)

A rectangular view that’s filled with the shape style.

### Supporting types

Construct instances of these styles using the properties and methods
of the shape style protocol.

[`AngularGradient`](/documentation/SwiftUI/AngularGradient)

An angular gradient.

[`EllipticalGradient`](/documentation/SwiftUI/EllipticalGradient)

A radial gradient that draws an ellipse.

[`LinearGradient`](/documentation/SwiftUI/LinearGradient)

A linear gradient.

[`RadialGradient`](/documentation/SwiftUI/RadialGradient)

A radial gradient.

[`Material`](/documentation/SwiftUI/Material)

A background material type.

[`ImagePaint`](/documentation/SwiftUI/ImagePaint)

A shape style that fills a shape by repeating a region of an image.

[`HierarchicalShapeStyle`](/documentation/SwiftUI/HierarchicalShapeStyle)

A shape style that maps to one of the numbered content styles.

[`HierarchicalShapeStyleModifier`](/documentation/SwiftUI/HierarchicalShapeStyleModifier)

Styles that you can apply to hierarchical shapes.

[`ForegroundStyle`](/documentation/SwiftUI/ForegroundStyle)

The foreground style in the current context.

[`BackgroundStyle`](/documentation/SwiftUI/BackgroundStyle)

The background style in the current context.

[`SelectionShapeStyle`](/documentation/SwiftUI/SelectionShapeStyle)

A style used to visually indicate selection following platform conventional
colors and behaviors.

[`SeparatorShapeStyle`](/documentation/SwiftUI/SeparatorShapeStyle)

A style appropriate for foreground separator or border lines.

[`TintShapeStyle`](/documentation/SwiftUI/TintShapeStyle)

A style that reflects the current tint color.

[`FillShapeStyle`](/documentation/SwiftUI/FillShapeStyle)

A shape style that displays one of the overlay fills.

[`LinkShapeStyle`](/documentation/SwiftUI/LinkShapeStyle)

A style appropriate for links.

[`PlaceholderTextShapeStyle`](/documentation/SwiftUI/PlaceholderTextShapeStyle)

A style appropriate for placeholder text.

[`WindowBackgroundShapeStyle`](/documentation/SwiftUI/WindowBackgroundShapeStyle)

A style appropriate for elements that should match the background
of their containing window.

## Relationships

### Conforming Types

[`MeshGradient`](/documentation/SwiftUI/MeshGradient)

[`SeparatorShapeStyle`](/documentation/SwiftUI/SeparatorShapeStyle)

[`FillShapeStyle`](/documentation/SwiftUI/FillShapeStyle)

[`SelectionShapeStyle`](/documentation/SwiftUI/SelectionShapeStyle)

[`Material`](/documentation/SwiftUI/Material)

[`TintShapeStyle`](/documentation/SwiftUI/TintShapeStyle)

[`ResolvedHDR`](/documentation/SwiftUI/Color/ResolvedHDR)

[`Resolved`](/documentation/SwiftUI/Color/Resolved)

[`BackgroundStyle`](/documentation/SwiftUI/BackgroundStyle)

[`LinkShapeStyle`](/documentation/SwiftUI/LinkShapeStyle)

[`Color`](/documentation/SwiftUI/Color)

[`Gradient`](/documentation/SwiftUI/Gradient)

[`AnyGradient`](/documentation/SwiftUI/AnyGradient)

[`AngularGradient`](/documentation/SwiftUI/AngularGradient)

[`ImagePaint`](/documentation/SwiftUI/ImagePaint)

[`ForegroundStyle`](/documentation/SwiftUI/ForegroundStyle)

[`HierarchicalShapeStyleModifier`](/documentation/SwiftUI/HierarchicalShapeStyleModifier)

[`RadialGradient`](/documentation/SwiftUI/RadialGradient)

[`Shader`](/documentation/SwiftUI/Shader)

[`AnyShapeStyle`](/documentation/SwiftUI/AnyShapeStyle)

[`LinearGradient`](/documentation/SwiftUI/LinearGradient)

[`EllipticalGradient`](/documentation/SwiftUI/EllipticalGradient)

[`PlaceholderTextShapeStyle`](/documentation/SwiftUI/PlaceholderTextShapeStyle)

[`HierarchicalShapeStyle`](/documentation/SwiftUI/HierarchicalShapeStyle)

[`WindowBackgroundShapeStyle`](/documentation/SwiftUI/WindowBackgroundShapeStyle)

### Inherits From

[`SendableMetatype`](/documentation/Swift/SendableMetatype)

[`Sendable`](/documentation/Swift/Sendable)

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)