--- title: ShapeStyle framework: swiftui role: symbol role_heading: Protocol path: swiftui/shapestyle --- # ShapeStyle A color or pattern to use when rendering a shape. ## Declaration ```swift protocol ShapeStyle : Sendable ``` ## Overview 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 or the style returned by image(_:sourceRect:scale:), or one of the gradient types, like the one returned by 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 or primary. You can use a shape style by: Filling a shape with a style with the 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)) Tracing the outline of a shape with a style with either the stroke(_:lineWidth:) or the stroke(_:style:) modifier: RoundedRectangle(cornerRadius: 10) .stroke(.mint, lineWidth: 10) .frame(width: 200, height: 50) Styling the foreground elements in a view with the foregroundStyle(_:) modifier: VStack(alignment: .leading) { Text("Primary") .font(.title) Text("Secondary") .font(.caption) .foregroundStyle(.secondary) } ## Topics ### System colors - [black](swiftui/shapestyle/black.md) - [blue](swiftui/shapestyle/blue.md) - [brown](swiftui/shapestyle/brown.md) - [clear](swiftui/shapestyle/clear.md) - [cyan](swiftui/shapestyle/cyan.md) - [gray](swiftui/shapestyle/gray.md) - [green](swiftui/shapestyle/green.md) - [indigo](swiftui/shapestyle/indigo.md) - [mint](swiftui/shapestyle/mint.md) - [orange](swiftui/shapestyle/orange.md) - [pink](swiftui/shapestyle/pink.md) - [purple](swiftui/shapestyle/purple.md) - [red](swiftui/shapestyle/red.md) - [teal](swiftui/shapestyle/teal.md) - [white](swiftui/shapestyle/white.md) - [yellow](swiftui/shapestyle/yellow.md) ### Angular gradients - [angularGradient(_:center:startAngle:endAngle:)](swiftui/shapestyle/angulargradient(_:center:startangle:endangle:).md) - [angularGradient(colors:center:startAngle:endAngle:)](swiftui/shapestyle/angulargradient(colors:center:startangle:endangle:).md) - [angularGradient(stops:center:startAngle:endAngle:)](swiftui/shapestyle/angulargradient(stops:center:startangle:endangle:).md) ### Conic gradients - [conicGradient(_:center:angle:)](swiftui/shapestyle/conicgradient(_:center:angle:).md) - [conicGradient(colors:center:angle:)](swiftui/shapestyle/conicgradient(colors:center:angle:).md) - [conicGradient(stops:center:angle:)](swiftui/shapestyle/conicgradient(stops:center:angle:).md) ### Elliptical gradients - [ellipticalGradient(_:center:startRadiusFraction:endRadiusFraction:)](swiftui/shapestyle/ellipticalgradient(_:center:startradiusfraction:endradiusfraction:).md) - [ellipticalGradient(colors:center:startRadiusFraction:endRadiusFraction:)](swiftui/shapestyle/ellipticalgradient(colors:center:startradiusfraction:endradiusfraction:).md) - [ellipticalGradient(stops:center:startRadiusFraction:endRadiusFraction:)](swiftui/shapestyle/ellipticalgradient(stops:center:startradiusfraction:endradiusfraction:).md) ### Linear gradients - [linearGradient(_:startPoint:endPoint:)](swiftui/shapestyle/lineargradient(_:startpoint:endpoint:).md) - [linearGradient(colors:startPoint:endPoint:)](swiftui/shapestyle/lineargradient(colors:startpoint:endpoint:).md) - [linearGradient(stops:startPoint:endPoint:)](swiftui/shapestyle/lineargradient(stops:startpoint:endpoint:).md) ### Radial gradients - [radialGradient(_:center:startRadius:endRadius:)](swiftui/shapestyle/radialgradient(_:center:startradius:endradius:).md) - [radialGradient(colors:center:startRadius:endRadius:)](swiftui/shapestyle/radialgradient(colors:center:startradius:endradius:).md) - [radialGradient(stops:center:startRadius:endRadius:)](swiftui/shapestyle/radialgradient(stops:center:startradius:endradius:).md) ### Materials - [ultraThinMaterial](swiftui/shapestyle/ultrathinmaterial.md) - [thinMaterial](swiftui/shapestyle/thinmaterial.md) - [regularMaterial](swiftui/shapestyle/regularmaterial.md) - [thickMaterial](swiftui/shapestyle/thickmaterial.md) - [ultraThickMaterial](swiftui/shapestyle/ultrathickmaterial.md) - [bar](swiftui/shapestyle/bar.md) ### Image paint styles - [image(_:sourceRect:scale:)](swiftui/shapestyle/image(_:sourcerect:scale:).md) ### Hierarchical styles - [secondary](swiftui/shapestyle/secondary-swift.property.md) - [tertiary](swiftui/shapestyle/tertiary-swift.property.md) - [quaternary](swiftui/shapestyle/quaternary-swift.property.md) - [quinary](swiftui/shapestyle/quinary-swift.property.md) - [primary](swiftui/shapestyle/primary.md) - [secondary](swiftui/shapestyle/secondary-swift.type.property.md) - [tertiary](swiftui/shapestyle/tertiary-swift.type.property.md) - [quaternary](swiftui/shapestyle/quaternary-swift.type.property.md) - [quinary](swiftui/shapestyle/quinary-swift.type.property.md) ### Semantic styles - [foreground](swiftui/shapestyle/foreground.md) - [background](swiftui/shapestyle/background.md) - [selection](swiftui/shapestyle/selection.md) - [separator](swiftui/shapestyle/separator.md) - [tint](swiftui/shapestyle/tint.md) - [placeholder](swiftui/shapestyle/placeholder.md) - [link](swiftui/shapestyle/link.md) - [fill](swiftui/shapestyle/fill.md) - [windowBackground](swiftui/shapestyle/windowbackground.md) ### Modifying a shape style - [blendMode(_:)](swiftui/shapestyle/blendmode(_:)-swift.method.md) - [opacity(_:)](swiftui/shapestyle/opacity(_:)-swift.method.md) - [shadow(_:)](swiftui/shapestyle/shadow(_:)-swift.method.md) ### Configuring the default shape style - [blendMode(_:)](swiftui/shapestyle/blendmode(_:)-swift.type.method.md) - [opacity(_:)](swiftui/shapestyle/opacity(_:)-swift.type.method.md) - [shadow(_:)](swiftui/shapestyle/shadow(_:)-swift.type.method.md) ### Mapping to absolute coordinates - [in(_:)](swiftui/shapestyle/in(_:).md) ### Resolving a shape style in an environment - [resolve(in:)](swiftui/shapestyle/resolve(in:).md) - [Resolved](swiftui/shapestyle/resolved.md) ### Using a shape style as a view - [body](swiftui/shapestyle/body.md) ### Supporting types - [AngularGradient](swiftui/angulargradient.md) - [EllipticalGradient](swiftui/ellipticalgradient.md) - [LinearGradient](swiftui/lineargradient.md) - [RadialGradient](swiftui/radialgradient.md) - [Material](swiftui/material.md) - [ImagePaint](swiftui/imagepaint.md) - [HierarchicalShapeStyle](swiftui/hierarchicalshapestyle.md) - [HierarchicalShapeStyleModifier](swiftui/hierarchicalshapestylemodifier.md) - [ForegroundStyle](swiftui/foregroundstyle.md) - [BackgroundStyle](swiftui/backgroundstyle.md) - [SelectionShapeStyle](swiftui/selectionshapestyle.md) - [SeparatorShapeStyle](swiftui/separatorshapestyle.md) - [TintShapeStyle](swiftui/tintshapestyle.md) - [FillShapeStyle](swiftui/fillshapestyle.md) - [LinkShapeStyle](swiftui/linkshapestyle.md) - [PlaceholderTextShapeStyle](swiftui/placeholdertextshapestyle.md) - [WindowBackgroundShapeStyle](swiftui/windowbackgroundshapestyle.md) ### Instance Methods - [materialActiveAppearance(_:)](swiftui/shapestyle/materialactiveappearance(_:).md) ## Relationships ### Inherits From - [Sendable](swift/sendable.md) - [SendableMetatype](swift/sendablemetatype.md) ### Conforming Types - [AngularGradient](swiftui/angulargradient.md) - [AnyGradient](swiftui/anygradient.md) - [AnyShapeStyle](swiftui/anyshapestyle.md) - [BackgroundStyle](swiftui/backgroundstyle.md) - [Color](swiftui/color.md) - [Color.Resolved](swiftui/color/resolved.md) - [Color.ResolvedHDR](swiftui/color/resolvedhdr.md) - [EllipticalGradient](swiftui/ellipticalgradient.md) - [FillShapeStyle](swiftui/fillshapestyle.md) - [ForegroundStyle](swiftui/foregroundstyle.md) - [Gradient](swiftui/gradient.md) - [HierarchicalShapeStyle](swiftui/hierarchicalshapestyle.md) - [HierarchicalShapeStyleModifier](swiftui/hierarchicalshapestylemodifier.md) - [ImagePaint](swiftui/imagepaint.md) - [LinearGradient](swiftui/lineargradient.md) - [LinkShapeStyle](swiftui/linkshapestyle.md) - [Material](swiftui/material.md) - [MeshGradient](swiftui/meshgradient.md) - [PlaceholderTextShapeStyle](swiftui/placeholdertextshapestyle.md) - [RadialGradient](swiftui/radialgradient.md) - [SelectionShapeStyle](swiftui/selectionshapestyle.md) - [SeparatorShapeStyle](swiftui/separatorshapestyle.md) - [Shader](swiftui/shader.md) - [TintShapeStyle](swiftui/tintshapestyle.md) - [WindowBackgroundShapeStyle](swiftui/windowbackgroundshapestyle.md) ## See Also ### Styling content - [border(_:width:)](swiftui/view/border(_:width:).md) - [foregroundStyle(_:)](swiftui/view/foregroundstyle(_:).md) - [foregroundStyle(_:_:)](swiftui/view/foregroundstyle(_:_:).md) - [foregroundStyle(_:_:_:)](swiftui/view/foregroundstyle(_:_:_:).md) - [backgroundStyle(_:)](swiftui/view/backgroundstyle(_:).md) - [backgroundStyle](swiftui/environmentvalues/backgroundstyle.md) - [AnyShapeStyle](swiftui/anyshapestyle.md) - [Gradient](swiftui/gradient.md) - [MeshGradient](swiftui/meshgradient.md) - [AnyGradient](swiftui/anygradient.md) - [ShadowStyle](swiftui/shadowstyle.md) - [Glass](swiftui/glass.md)