Colors and materials

Build adaptive colors, gradients, and native blurred surfaces.

Visual properties such as Background accept a Brush. A Color converts to a solid brush automatically, so ordinary surfaces remain concise:

new Border
{
    Background = Colors.SecondaryBackground,
    Child = content
};

Semantic colors

Prefer Colors.Label, SecondaryLabel, Background, SecondaryBackground, GroupedBackground, Separator, and the system accent colors. UIKit resolves them for light/dark appearance, increased contrast, and vibrancy.

Create an explicit adaptive color when the design has its own pair:

Color cardColor = Color.Dynamic(
    Color.FromHex(0xF5F5F7),
    Color.FromHex(0x242426));

Color.FromBytes accepts 8-bit channels. Color.FromHex accepts 0xRRGGBB or 0xAARRGGBB. Colors.Transparent is fully transparent. WithAlpha returns a copy with another opacity while preserving system colors and explicit light/dark variants. When a gradient or animation fades a color away, use color.WithAlpha(0) so its RGB channels interpolate from that color instead of transparent black.

Gradients

new LinearGradient
{
    Stops =
    {
        new GradientStop(Color.FromHex(0x305CDE), 0),
        new GradientStop(Color.FromHex(0x8B5CF6), 1)
    },
    Start = new Point(0, 0),
    End = new Point(1, 1)
};

Gradient coordinates use unit space: (0, 0) is the top-leading corner and (1, 1) is bottom-trailing. LinearGradient.Vertical(...) and Horizontal(...) spread colors evenly.

Animations can interpolate two gradients when they have the same number of stops and both use interpolatable custom colors. System colors, materials, or incompatible gradients change without an in-between value.

Materials

Material uses UIKit's native blurred surfaces:

new Border
{
    Background = new Material(MaterialKind.Thin),
    CornerRadius = 18,
    Child = controls
};

Available thicknesses run from UltraThin through Chrome. Glass uses the interactive Liquid Glass material on iOS 26 and falls back to Chrome on earlier supported versions. Materials reveal whatever is rendered behind them, so place them in an Overlay rather than over an opaque parent.

See overlay and border for surface composition, and surfaces and transforms for clipping and elevation.