Magic Gradients: Beautiful Backgrounds in Xamarin.Forms

Jayme Singleton

This is a guest blog by Bohdan Benetskyi. Bohdan is a Xamarin and .NET developer at PGS Software and works side by side Marcin Gierlasiński on Magic Gradients.

Magic Gradients for Xamarin.Forms

Magic Gradients is a NuGet that provide a possibility to add beautiful and enhanced gradients into Xamarin.Forms applications. This NuGet package supports all common Xamarin platforms, such as Android, iOS and UWP. It is built upon SkiaSharp to draw a simple multi-color or multi-layer engaged gradients in Skia Surface(SKSurface). We try to make it dead simple to start using it, you don't need anything to initialize at all platforms.

Setting up and using Magic Gradients into your app will only take a few minutes. Here is a quick taste of what you can do with the library using it as a separate layer or background.

Image CoolGradient1Image CoolGradient2Image CoolGradient3Image CoolGradient4Image CoolGradient5

How to Install Magic Gradients?

At first take any of your applications or create a new one with Shell Template. Next step is to install Magic Gradients NuGet. To do that you can:

  • Search for MagicGradients at NuGet browser
  • Or With Package Manager CLI: Install-Package MagicGradients
  • Alternatively, use the .Net CLI: dotnet add package MagicGradients
  • Also as an option you can just edit your csproj file and add <PackageReference Include="MagiGradients" Version="1.0.0" />

We should install it only for our "Core" project.

How to Use Magic Gradients?

Magic Gradients provides GradientView control which is just a surface for SkiaSharp inside. Inside GradientView you need to set GradientSource which is a default container. Inside it you can place single gradients LinearGradient, RadialGradient or multiple gradients with GradientCollection as a top element. Also it accepts CssGradientSource with inline CSS or with binding to CSS from a file via StyleClass or StyleId.

Let's create dead simple gradient from Red to Yellow:

For all samples we will import the namespace:

xmlns:magic="clr-namespace:MagicGradients;assembly=MagicGradients"

After that we can start to use Magic Gradients:

<magic:GradientView VerticalOptions="FillAndExpand">
     <magic:GradientView.GradientSource>
         <magic:LinearGradient Angle="90">
             <magic:GradientStop Color="Red" Offset="0" />
             <magic:GradientStop Color="Yellow" Offset="1" />
         </magic:LinearGradient>
     </magic:GradientView.GradientSource>
 </magic:GradientView>

Let us, instead, make a little bit interesting Gradient with two Linear Gradients inside:

<magic:GradientView VerticalOptions="FillAndExpand">
    <magic:GradientView.GradientSource>
        <magic:GradientCollection>
            <magic:LinearGradient Angle="45">
                <magic:GradientStop Color="Orange" Offset="0" />
                <magic:GradientStop Color="#ff0000" Offset="0.6" />
            </magic:LinearGradient>
            <magic:LinearGradient Angle="90">
                <magic:GradientStop Color="#33ff0000" Offset="0.4" />
                <magic:GradientStop Color="#ff00ff00" Offset="1" />
            </magic:LinearGradient>
        </magic:GradientCollection>
    </magic:GradientView.GradientSource>
</magic:GradientView>

Or add a complex one:

<StackLayout Spacing="0">
    <magic:GradientView VerticalOptions="FillAndExpand">
        <magic:GradientView.GradientSource>
            <magic:RadialGradient Center="0.5,0.5" RadiusX="200" RadiusY="200">
                <magic:GradientStop Color="Red" Offset="0" />
                <magic:GradientStop Color="Yellow" Offset="0.5" />
                <magic:GradientStop Color="Green" Offset="1" />
            </magic:RadialGradient>
        </magic:GradientView.GradientSource>
    </magic:GradientView>
    <magic:GradientView VerticalOptions="FillAndExpand">
        <magic:GradientView.GradientSource>
            <magic:RadialGradient Center="600,600" RadiusX="600" RadiusY="600" Flags="None">
                <magic:GradientStop Color="Red" Offset="0" />
                <magic:GradientStop Color="Yellow" Offset="0.5" />
                <magic:GradientStop Color="Green" Offset="1" />
            </magic:RadialGradient>
        </magic:GradientView.GradientSource>
    </magic:GradientView>
</StackLayout>

To use Magic Gradient for 100% and not import any CSS files into your project, try 🥁 — Inline CSS 🤯. This means that you have some string inline in XAML or in resources under some key. That string has special prefix and postfix in his value and parsed by Xamarin.Forms in the same way as other CSS from files.

<magic:GradientView VerticalOptions="FillAndExpand">
    <magic:GradientView.GradientSource>
        <magic:CssGradientSource>
            <x:String>
                <![CDATA[
                    linear-gradient(242deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%,rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%,rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%,rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%,rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%,rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%),linear-gradient(152deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%,rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%,rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%,rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%,rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%,rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%),linear-gradient(11deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%,rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%,rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%,rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%,rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%,rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%),linear-gradient(27deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%,rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%,rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%,rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%,rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%,rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%),linear-gradient(317deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%,rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%,rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%,rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%,rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%,rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%),linear-gradient(128deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%,rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%,rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%,rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%,rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%,rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%,rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%,rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%),linear-gradient(90deg, rgb(185, 139, 80),rgb(176, 26, 6))
                ]]>
            </x:String>
        </magic:CssGradientSource>
    </magic:GradientView.GradientSource>
</magic:GradientView>

And if we want to use the same from CSS:

.gradientStyledWithCss {
    background: linear-gradient(242deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%,rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%,rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%,rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%,rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%,rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%),linear-gradient(152deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%,rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%,rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%,rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%,rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%,rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%),linear-gradient(11deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%,rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%,rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%,rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%,rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%,rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%),linear-gradient(27deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%,rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%,rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%,rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%,rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%,rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%),linear-gradient(317deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%,rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%,rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%,rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%,rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%,rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%),linear-gradient(128deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%,rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%,rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%,rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%,rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%,rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%,rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%,rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%),linear-gradient(90deg, rgb(185, 139, 80),rgb(176, 26, 6));
}
<ContentPage.Resources>
    <StyleSheet Source="../Styles/LinearGradientsPage.css" />
</ContentPage.Resources>
...
<magic:GradientView VerticalOptions="FillAndExpand" StyleClass="gradientStyledWithCss" />

This is much more interesting, right? As you may see with CSS at file our XAML element becomes built-in and simple, without any garbage in code 😋

CSS Gradient Source

CSS Gradients, much more powerful and harder to understand or write, but we even don’t need it 🙃. We can just search for some cool sites with background gradients in pure CSS and Copy/Paste them. As an example you may copy gradients background from Gradient Magic site.

However, CSS a lot of ways to set same gradient! Magic Gradient NuGet try to support most popular of them, but it’s still not 100%.

Sometimes you may get some problems with copied CSS 😥, but all of them you can simply fix by hand modification of CSS.

Or you may copy worked examples from Magic Gradient Playgroud App 😎

Style Pages with Gradient Background:

Simple and working solution is to create at App.xaml Control Template of Style for ContentPage. We will create one Style that will be applied for all pages and derived types(it might be helpful if you are using some MvvmFramework like MvvmCross or other) and one ControlTemplate which will be applied by key:

<ControlTemplate x:Key="PageWithGradient">
    <Grid>
        <magicGradients:GradientView VerticalOptions="FillAndExpand" >
            <magicGradients:GradientView.GradientSource>
                <magicGradients:CssGradientSource>
                    <x:String>
                        <![CDATA[
                                    linear-gradient(45deg, rgb(149, 10, 155) 0%, rgb(149, 10, 155) 9%,rgb(120, 16, 136) 9%, rgb(120, 16, 136) 13%,rgb(178, 3, 174) 13%, rgb(178, 3, 174) 32%,rgb(91, 23, 117) 32%, rgb(91, 23, 117) 42%,rgb(32, 36, 79) 42%, rgb(32, 36, 79) 46%,rgb(61, 30, 98) 46%, rgb(61, 30, 98) 70%,rgb(3, 43, 60) 70%, rgb(3, 43, 60) 100%)
                                ]]>
                    </x:String>
                </magicGradients:CssGradientSource>
            </magicGradients:GradientView.GradientSource>
        </magicGradients:GradientView>
        <ContentPresenter />
    </Grid>
</ControlTemplate>
<Style TargetType="ContentPage" ApplyToDerivedTypes="True">
    <Setter Property="ControlTemplate">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <magicGradients:GradientView VerticalOptions="FillAndExpand" >
                        <magicGradients:GradientView.GradientSource>
                            <magicGradients:CssGradientSource>
                                <x:String>
                                    <![CDATA[
                                    linear-gradient(45deg, rgb(133, 28, 39) 0%, rgb(133, 28, 39) 1%,rgb(191, 40, 36) 1%, rgb(191, 40, 36) 15%,rgb(76, 15, 42) 15%, rgb(76, 15, 42) 38%,rgb(162, 34, 38) 38%, rgb(162, 34, 38) 55%,rgb(220, 46, 35) 55%, rgb(220, 46, 35) 62%,rgb(105, 21, 41) 62%, rgb(105, 21, 41) 63%,rgb(47, 9, 44) 63%, rgb(47, 9, 44) 69%,rgb(18, 3, 45) 69%, rgb(18, 3, 45) 100%)
                                ]]>
                                </x:String>
                            </magicGradients:CssGradientSource>
                        </magicGradients:GradientView.GradientSource>
                    </magicGradients:GradientView>
                    <ContentPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And usage of ControlTemplate in your Content Pages:

<ContentPage 
    <!--...-->
    ControlTemplate="{StaticResource PageWithGradient}">
    <!--...-->
</ContentPage>

This not restrict you to use only in Pages, you may use it everywhere you want in everything which apply some templates, like Shell Flyout Header:

<Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
                <magicGradients:GradientView VerticalOptions="FillAndExpand" >
                    <magicGradients:GradientView.GradientSource>
                            <magicGradients:CssGradientSource>
                                <x:String>
                                    <![CDATA[
                                        linear-gradient(45deg, rgb(149, 10, 155) 0%, rgb(149, 10, 155) 9%,rgb(120, 16, 136) 9%, rgb(120, 16, 136) 13%,rgb(178, 3, 174) 13%, rgb(178, 3, 174) 32%,rgb(91, 23, 117) 32%, rgb(91, 23, 117) 42%,rgb(32, 36, 79) 42%, rgb(32, 36, 79) 46%,rgb(61, 30, 98) 46%, rgb(61, 30, 98) 70%,rgb(3, 43, 60) 70%, rgb(3, 43, 60) 100%)
                                    ]]>
                                </x:String>
                            </magicGradients:CssGradientSource>
                    </magicGradients:GradientView.GradientSource>
                </magicGradients:GradientView>
            <Label Text="Magic Gradients" TextColor="White" FontAttributes="Bold"
                    FontSize="20" HorizontalOptions="Center" VerticalOptions="Center" />
        </Grid>
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

Magic Gradients Playground App

In official GitHub Repo you may find a folder Playground where we place application with example of gradients:

Please pay attention to Gradient Gallery page, there you can find more than 400 cool gradients in CSS, to use them just open and copy CSS into your app. If that gradient works here will work in your project also.

Conclusion

This is a great NuGet with the nice feature, hopefully 🙃. It's:

  • Easy to attach for any design
  • Easy to use
  • Simple — means fewer errors
  • Open Source — you can see how it works, improve or suppose improvement.
  • Up to date with newer versions
  • May use Pure* CSS from examples(thousands cool examples)

If you will have any questions or see how we could improve it, just ping us at Twitter. We don’t bite 🤠: @MGierlasinski; @bbenetskyy;

Acknowledgments

First, thank you to the main contributor and idea-holder of the magic that we have – Marcin Gierlasinski. Additionally, thank you to all our contributors at GitHub(Luce Carter, Bogusław Błoński, …). Special "thanks" for authors of Gradient Magic.

2 comments

Discussion is closed. Login to edit/delete existing comments.

  • Sambhav Yadav 0

    But While Insert Label Control it is showing in bottom and gradient is shrink top

  • Chris Evans 0

    Can you animate these gradients? Such as having the lines created by css slowly move in the background?

Feedback usabilla icon