How to use gradients in .NET MAUI

4 minutes

Gradients are a very simple way to add a better visual experience to your cross-platform applications. That's why, in this post, I'm going to show you how to work with linear and circular gradients in .NET MAUI.

Understanding the concept of gradients

Before starting with the application of gradients in .NET MAUI, we must understand how they work, for this, I will use the CSS gradient tool.

In this site we can see a visualization of a linear gradient when opening the page.

This means that the gradient extends linearly from one end with one color to the other end with another color. In total, 3 colors are being set as part of the gradient in the example.

You can also see a couple of additional options on the site:

The first option allows us to indicate whether we want a linear or radial gradient, which basically refers to a gradient based on circles from the inside out. Similarly, we can set the gradient angle in the case of linear gradients. These concepts are important, since they will help us to know how to define gradients in .NET MAUI.

Finally, the 3 colors that have been set, which can be increased or decreased according to our needs, and which can also be changed color, are called Gradient Stops, since they define to what extent one of the colors will affect the gradient. In summary, and for your consideration, we can define the following:

Gradient Type: How the gradient will look, whether linearly or radially.
Gradient Angle: Towards which direction the gradient will point.
Gradient Stops: The colors in the gradient, and their position in the gradient.

Creating Linear Gradients in .NET MAUI

To add gradients to a .NET MAUI application, we must first specify the Background property of a View element from the XAML code. For example, we could define this property of a Grid as follows, although it is also possible to do the same with other elements, for example, inside a Frame:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
    </Grid.Background>
</Grid>

Once the property is used, let's start specifying a linear gradient. For it, we have to define an element of the type LinearGradientBrush, with a StartPoint equal to 0,0, and an EndPoint equal to 0,0 also:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,0">
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

Surely by now, you are wondering what the StartPoint and EndPoint properties are for.

These are properties that allow you to specify the orientation of the linear gradient, and I'll explain it better with this image:

In the image are represented different points that we can set for a gradient, indicating the direction from and to where we want the gradient to go. If we wanted the gradient to start in the upper left corner, and end in the lower right corner, we would have to specify this in the LinearGradientBrush.

If we wanted the gradient to go from top to bottom, we could specify StartPoint 0,0 and EndPoint 0,1, and so on.

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

With this we have already specified the type of gradient to use and the orientation. The third step is to specify the colors of the gradient. For it, we must use the GradientStopCollection property and inside, define the amount of GrandientStops that we need, as follows:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStopCollection>
                <GradientStop Offset="0" Color="DarkBlue">
                <GradientStop Offset="1" Color="LightBlue">
            </GradientStopCollection>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

Each GradientStop defines an Offset and a color. The Offset refers to the location of the GradientStop within the gradient, and can have a value between 0 and 1, while the color defines the color of the gradient section. The above code would result in the following:

Creating Radial Gradients in .NET MAUI

In the case of defining radial gradients, it is sufficient to change the gradient type to RadialGradientBrush.

Unlike the linear gradient, the StartPoint and EndPoint properties are not defined, but the Center property is defined, which sets the central position of the gradient:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <RadialGradientBrush Center="0.5,0.5">
            <GradientStopCollection>
                <GradientStop Offset="0" Color="DarkBlue">
                <GradientStop Offset="1" Color="LightBlue">
            </GradientStopCollection>
        </RadialGradientBrush>
    </Grid.Background>
</Grid>

Running the application, with the addition of a pink color, results in the following screen:

Finally, the screenshots you've seen throughout this post are part of a practical application of my .NET MAUI course, in which you take a random phrase and apply an automatically generated multi-color gradient to it, and in which you can learn much more about .NET MAUI.