# Drawing and graphics Enhance your views with graphical effects and customized drawings. ## Overview You create rich, dynamic user interfaces with the built-in views and [Shapes](/documentation/SwiftUI/Shapes) that SwiftUI provides. To enhance any view, you can apply many of the graphical effects typically associated with a graphics context, like setting colors, adding masks, and creating composites.  When you need the flexibility of immediate mode drawing in a graphics context, use a [`Canvas`](/documentation/SwiftUI/Canvas) view. This can be particularly helpful when you want to draw an extremely large number of dynamic shapes — for example, to create particle effects. For design guidance, see and in the Human Interface Guidelines. ## Topics ### Composing graphics effects [Composing advanced graphics effects with SwiftUI](/documentation/SwiftUI/Composing-advanced-graphics-effects-with-SwiftUI) Create compelling visuals in your app by combining graphical effects. ### Immediate mode drawing [Add rich graphics to your SwiftUI app](/documentation/SwiftUI/add-rich-graphics-to-your-swiftui-app) Make your apps stand out by adding background materials, vibrancy, custom graphics, and animations. [`struct Canvas`](/documentation/SwiftUI/Canvas) A view type that supports immediate mode drawing. [`struct GraphicsContext`](/documentation/SwiftUI/GraphicsContext) An immediate mode drawing destination, and its current state. ### Setting a color [`func tint(_:)`](/documentation/SwiftUI/View/tint(_:)) Sets the tint color within this view. [`struct Color`](/documentation/SwiftUI/Color) A representation of a color that adapts to a given context. ### Styling content [`func border(S, width: CGFloat) -> some View`](/documentation/SwiftUI/View/border(_:width:)) Adds a border to this view with the specified style and width. [`func foregroundStyle(S) -> some View`](/documentation/SwiftUI/View/foregroundStyle(_:)) Sets a view’s foreground elements to use a given style. [`func foregroundStyle(S1, S2) -> some View`](/documentation/SwiftUI/View/foregroundStyle(_:_:)) Sets the primary and secondary levels of the foreground style in the child view. [`func foregroundStyle(S1, S2, S3) -> some View`](/documentation/SwiftUI/View/foregroundStyle(_:_:_:)) Sets the primary, secondary, and tertiary levels of the foreground style. [`func backgroundStyle(S) -> some View`](/documentation/SwiftUI/View/backgroundStyle(_:)) Sets the specified style to render backgrounds within the view. [`var backgroundStyle: AnyShapeStyle?`](/documentation/SwiftUI/EnvironmentValues/backgroundStyle) An optional style that overrides the default system background style when set. [`protocol ShapeStyle`](/documentation/SwiftUI/ShapeStyle) A color or pattern to use when rendering a shape. [`struct AnyShapeStyle`](/documentation/SwiftUI/AnyShapeStyle) A type-erased ShapeStyle value. [`struct Gradient`](/documentation/SwiftUI/Gradient) A color gradient represented as an array of color stops, each having a parametric location value. [`struct MeshGradient`](/documentation/SwiftUI/MeshGradient) A two-dimensional gradient defined by a 2D grid of positioned colors. [`struct AnyGradient`](/documentation/SwiftUI/AnyGradient) A color gradient. [`struct ShadowStyle`](/documentation/SwiftUI/ShadowStyle) A style to use when rendering shadows. [`struct Glass`](/documentation/SwiftUI/Glass) A structure that defines the configuration of the Liquid Glass material. ### Transforming colors [`func brightness(Double) -> some View`](/documentation/SwiftUI/View/brightness(_:)) Brightens this view by the specified amount. [`func contrast(Double) -> some View`](/documentation/SwiftUI/View/contrast(_:)) Sets the contrast and separation between similar colors in this view. [`func colorInvert() -> some View`](/documentation/SwiftUI/View/colorInvert()) Inverts the colors in this view. [`func colorMultiply(Color) -> some View`](/documentation/SwiftUI/View/colorMultiply(_:)) Adds a color multiplication effect to this view. [`func saturation(Double) -> some View`](/documentation/SwiftUI/View/saturation(_:)) Adjusts the color saturation of this view. [`func grayscale(Double) -> some View`](/documentation/SwiftUI/View/grayscale(_:)) Adds a grayscale effect to this view. [`func hueRotation(Angle) -> some View`](/documentation/SwiftUI/View/hueRotation(_:)) Applies a hue rotation effect to this view. [`func luminanceToAlpha() -> some View`](/documentation/SwiftUI/View/luminanceToAlpha()) Adds a luminance to alpha effect to this view. [`func materialActiveAppearance(MaterialActiveAppearance) -> some View`](/documentation/SwiftUI/View/materialActiveAppearance(_:)) Sets an explicit active appearance for materials in this view. [`var materialActiveAppearance: MaterialActiveAppearance`](/documentation/SwiftUI/EnvironmentValues/materialActiveAppearance) The behavior materials should use for their active state, defaulting to `automatic`. [`struct MaterialActiveAppearance`](/documentation/SwiftUI/MaterialActiveAppearance) The behavior for how materials appear active and inactive. ### Scaling, rotating, or transforming a view [`func scaledToFill() -> some View`](/documentation/SwiftUI/View/scaledToFill()) Scales this view to fill its parent. [`func scaledToFit() -> some View`](/documentation/SwiftUI/View/scaledToFit()) Scales this view to fit its parent. [`func scaleEffect(_:anchor:)`](/documentation/SwiftUI/View/scaleEffect(_:anchor:)) Scales this view uniformly by the specified factor, relative to an anchor point. [`func scaleEffect(x: CGFloat, y: CGFloat, anchor: UnitPoint) -> some View`](/documentation/SwiftUI/View/scaleEffect(x:y:anchor:)) Scales this view’s rendered output by the given horizontal and vertical amounts, relative to an anchor point. [`func scaleEffect(x: CGFloat, y: CGFloat, z: CGFloat, anchor: UnitPoint3D) -> some View`](/documentation/SwiftUI/View/scaleEffect(x:y:z:anchor:)) Scales this view by the specified horizontal, vertical, and depth factors, relative to an anchor point. [`func aspectRatio(_:contentMode:)`](/documentation/SwiftUI/View/aspectRatio(_:contentMode:)) Constrains this view’s dimensions to the specified aspect ratio. [`func rotationEffect(Angle, anchor: UnitPoint) -> some View`](/documentation/SwiftUI/View/rotationEffect(_:anchor:)) Rotates a view’s rendered output in two dimensions around the specified point. [`func rotation3DEffect(Angle, axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint, anchorZ: CGFloat, perspective: CGFloat) -> some View`](/documentation/SwiftUI/View/rotation3DEffect(_:axis:anchor:anchorZ:perspective:)) Renders a view’s content as if it’s rotated in three dimensions around the specified axis. [`func perspectiveRotationEffect(Angle, axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint, anchorZ: CGFloat, perspective: CGFloat) -> some View`](/documentation/SwiftUI/View/perspectiveRotationEffect(_:axis:anchor:anchorZ:perspective:)) Renders a view’s content as if it’s rotated in three dimensions around the specified axis. [`func rotation3DEffect(Rotation3D, anchor: UnitPoint3D) -> some View`](/documentation/SwiftUI/View/rotation3DEffect(_:anchor:)) Rotates the view’s content by the specified 3D rotation value. [`func rotation3DEffect(_:axis:anchor:)`](/documentation/SwiftUI/View/rotation3DEffect(_:axis:anchor:)) Rotates the view’s content by an angle about an axis that you specify as a tuple of elements. [`func transformEffect(CGAffineTransform) -> some View`](/documentation/SwiftUI/View/transformEffect(_:)) Applies an affine transformation to this view’s rendered output. [`func transform3DEffect(AffineTransform3D) -> some View`](/documentation/SwiftUI/View/transform3DEffect(_:)) Applies a 3D transformation to this view’s rendered output. [`func projectionEffect(ProjectionTransform) -> some View`](/documentation/SwiftUI/View/projectionEffect(_:)) Applies a projection transformation to this view’s rendered output. [`struct ProjectionTransform`](/documentation/SwiftUI/ProjectionTransform) A 3x3 matrix that transforms points in a plane. [`enum ContentMode`](/documentation/SwiftUI/ContentMode) Constants that define how a view’s content fills the available space. ### Masking and clipping [`func mask(alignment: Alignment, () -> Mask) -> some View`](/documentation/SwiftUI/View/mask(alignment:_:)) Masks this view using the alpha channel of the given view. [`func clipped(antialiased: Bool) -> some View`](/documentation/SwiftUI/View/clipped(antialiased:)) Clips this view to its bounding rectangular frame. [`func clipShape(S, style: FillStyle) -> some View`](/documentation/SwiftUI/View/clipShape(_:style:)) Sets a clipping shape for this view. ### Applying blur and shadows [`func blur(radius: CGFloat, opaque: Bool) -> some View`](/documentation/SwiftUI/View/blur(radius:opaque:)) Applies a Gaussian blur to this view. [`func shadow(color: Color, radius: CGFloat, x: CGFloat, y: CGFloat) -> some View`](/documentation/SwiftUI/View/shadow(color:radius:x:y:)) Adds a shadow to this view. [`struct ColorMatrix`](/documentation/SwiftUI/ColorMatrix) A matrix to use in an RGBA color transformation. ### Applying effects based on geometry [`func visualEffect((EmptyVisualEffect, GeometryProxy) -> some VisualEffect) -> some View`](/documentation/SwiftUI/View/visualEffect(_:)) Applies effects to this view, while providing access to layout information through a geometry proxy. [`func visualEffect3D((EmptyVisualEffect, GeometryProxy3D) -> some VisualEffect) -> some View`](/documentation/SwiftUI/View/visualEffect3D(_:)) Applies effects to this view, while providing access to layout information through a 3D geometry proxy. [`protocol VisualEffect`](/documentation/SwiftUI/VisualEffect) Visual Effects change the visual appearance of a view without changing its ancestors or descendents. [`struct EmptyVisualEffect`](/documentation/SwiftUI/EmptyVisualEffect) The base visual effect that you apply additional effect to. ### Compositing views [`func blendMode(BlendMode) -> some View`](/documentation/SwiftUI/View/blendMode(_:)) Sets the blend mode for compositing this view with overlapping views. [`func compositingGroup() -> some View`](/documentation/SwiftUI/View/compositingGroup()) Wraps this view in a compositing group. [`func drawingGroup(opaque: Bool, colorMode: ColorRenderingMode) -> some View`](/documentation/SwiftUI/View/drawingGroup(opaque:colorMode:)) Composites this view’s contents into an offscreen image before final display. [`enum BlendMode`](/documentation/SwiftUI/BlendMode) Modes for compositing a view with overlapping content. [`enum ColorRenderingMode`](/documentation/SwiftUI/ColorRenderingMode) The set of possible working color spaces for color-compositing operations. [`protocol CompositorContent`](/documentation/SwiftUI/CompositorContent) A type that describes content a scene renders directly with Metal, rather than composing from SwiftUI views. [`struct CompositorContentBuilder`](/documentation/SwiftUI/CompositorContentBuilder) A result builder for composing a collection of [`CompositorContent`](/documentation/SwiftUI/CompositorContent) elements. [`struct AnyCompositorContent`](/documentation/SwiftUI/AnyCompositorContent) Type erased compositor content. ### Measuring a view [`struct GeometryReader`](/documentation/SwiftUI/GeometryReader) A container view that defines its content as a function of its own size and coordinate space. [`struct GeometryReader3D`](/documentation/SwiftUI/GeometryReader3D) A container view that defines its content as a function of its own size and coordinate space. [`struct GeometryProxy`](/documentation/SwiftUI/GeometryProxy) A proxy for access to the size and coordinate space (for anchor resolution) of the container view. [`func reservedRegions(kind: ReservedRegion.Kind, options: ReservedRegion.QueryOptions, layoutDirectionBehavior: LayoutDirectionBehavior) -> [ReservedRegion]`](/documentation/SwiftUI/GeometryProxy/reservedRegions(kind:options:layoutDirectionBehavior:)) Returns an array of reserved regions that match the selection options you specify. [`struct ReservedRegion`](/documentation/SwiftUI/ReservedRegion) A region within a view’s coordinate space that another entity reserves. [`struct GeometryProxy3D`](/documentation/SwiftUI/GeometryProxy3D) A proxy for access to the size and coordinate space of the container view. [`func coordinateSpace(NamedCoordinateSpace) -> some View`](/documentation/SwiftUI/View/coordinateSpace(_:)) Assigns a name to the view’s coordinate space, so other code can operate on dimensions like points and sizes relative to the named space. [`enum CoordinateSpace`](/documentation/SwiftUI/CoordinateSpace) A resolved coordinate space created by the coordinate space protocol. [`protocol CoordinateSpaceProtocol`](/documentation/SwiftUI/CoordinateSpaceProtocol) A frame of reference within the layout system. [`struct PhysicalMetric`](/documentation/SwiftUI/PhysicalMetric) Provides access to a value in points that corresponds to the specified physical measurement. [`struct PhysicalMetricsConverter`](/documentation/SwiftUI/PhysicalMetricsConverter) A physical metrics converter provides conversion between point values and their extent in 3D space, in the form of physical length measurements. ### Responding to a geometry change [`func onGeometryChange(for:of:action:)`](/documentation/SwiftUI/View/onGeometryChange(for:of:action:)) Adds an action to be performed when a value, created from a geometry proxy, changes. ### Accessing Metal shaders [`func colorEffect(Shader, isEnabled: Bool) -> some View`](/documentation/SwiftUI/View/colorEffect(_:isEnabled:)) Returns a new view that applies `shader` to `self` as a filter effect on the color of each pixel. [`func distortionEffect(Shader, maxSampleOffset: CGSize, isEnabled: Bool) -> some View`](/documentation/SwiftUI/View/distortionEffect(_:maxSampleOffset:isEnabled:)) Returns a new view that applies `shader` to `self` as a geometric distortion effect on the location of each pixel. [`func layerEffect(Shader, maxSampleOffset: CGSize, isEnabled: Bool) -> some View`](/documentation/SwiftUI/View/layerEffect(_:maxSampleOffset:isEnabled:)) Returns a new view that applies `shader` to `self` as a filter on the raster layer created from `self`. [`struct Shader`](/documentation/SwiftUI/Shader) A reference to a function in a Metal shader library, along with its bound uniform argument values. [`struct ShaderFunction`](/documentation/SwiftUI/ShaderFunction) A reference to a function in a Metal shader library. [`struct ShaderLibrary`](/documentation/SwiftUI/ShaderLibrary) A Metal shader library. ### Accessing geometric constructs [`enum Axis`](/documentation/SwiftUI/Axis) The horizontal or vertical dimension in a 2D coordinate system. [`struct Angle`](/documentation/SwiftUI/Angle) A geometric angle whose value you access in either radians or degrees. [`struct UnitPoint`](/documentation/SwiftUI/UnitPoint) A normalized 2D point in a view’s coordinate space. [`struct UnitPoint3D`](/documentation/SwiftUI/UnitPoint3D) A normalized 3D point in a view’s coordinate space. [`struct Anchor`](/documentation/SwiftUI/Anchor) An opaque value derived from an anchor source and a particular view. [`protocol DepthAlignmentID`](/documentation/SwiftUI/DepthAlignmentID) A type that defines a custom depth alignment guide. [`struct Alignment3D`](/documentation/SwiftUI/Alignment3D) An alignment in all three axes. [`struct GeometryProxyCoordinateSpace3D`](/documentation/SwiftUI/GeometryProxyCoordinateSpace3D) A representation of a `GeometryProxy3D` which can be used for `CoordinateSpace3D` based conversions. --- Copyright © 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)