Draw breathtaking backgrounds in your Xamarin.Forms application. You can add unlimited number of complex linear and radial gradients to create uniqe effects. It's a kind of magic. Control inspired by PancakeView and Gradient Magic. Powered by SkiaSharp.

Package	Version	Dependencies
MagicGradients

You can preview some of the gradients from Gradient Magic in Playground app. To use the examples from the gallery, you need just copy Gradient CSS and paste into your project.

(Video on YouTube ⬇️)

Install via NuGet or include the Magic Gradients project in your solution and add local references in your shared project.

As it requires SkiaSharp, you will also need to ensure you add SkiaSharp.Views.Forms to your shared Xamarin.Forms project.

You can build gradients manually in Xaml. To draw single gradient just create LinearGradient or RadialGradient as the child of GradientView control.

<magic:GradientView>
    <magic:LinearGradient Angle="45">
        <magic:GradientStop Color="Red" />
        <magic:GradientStop Color="Yellow" />
    </magic:LinearGradient>
</magic:GradientView>

There is also possibility to add collection of gradients. You can mix linear and radial gradients, use transparency in color definitions to get blend effect.

<magic:GradientView>
    <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>

You can also build gradient in C# using GradientBuilder with Fluent API:

 var gradients = new GradientBuilder()
    .AddLinearGradient(45)
        .AddStop(Color.Green, 0.2f)
        .AddStop(Color.Aqua, 0.9f)
    .AddLinearGradient(90)
        .AddStop(Color.Blue)
        .AddStop(Color.DeepPink)
    .Build();

By using GradientBuilder, some of the construction process is automated, there is also validation performed that looks after undefined stop offsets and set them automatically. GradientBuilder is used under the hood when CSS code is parsed.

Magic Gradients supports parsing CSS functions linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient, you can find full specification in several sources:

• https://www.w3schools.com/css/css3_gradients.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient

You can embed inline CSS directly in xaml:

<magic:GradientView>
    <magic:CssGradientSource>
        <x:String>
            <![CDATA[
                linear-gradient(242deg, red, green, orange)
            ]]>
        </x:String>
    </magic:CssGradientSource>
</magic:GradientView>

Styling with CSS styleshet is also supported:

<magic:GradientView StyleClass="gradientStyledWithCss" />

.gradientStyledWithCss {
    background: linear-gradient(90deg, rgb(235, 216, 9),rgb(202, 60, 134));
}

You can test CSS gradient code live within Playground application.

Single linear gradient

linear-gradient(direction, color-stop1, color-stop2, ...);

Repeating linear gradient

releating-linear-gradient(direction, color-stop1, color-stop2, ...);

Supported directions:

• named directions: to left, to right, to top, to bottom, to left top, to right bottom etc.
• angles in degrees: 135deg
• angle proportional: 0.45turn (range should be between 0-1)

Each color stop should contain color information and optionally it's position along the gradient line, described in percents.

Suppored color formats:

• colors described by channels in RGB or HSL format: rgb(red, green, blue), rgba(red, green, blue, alpha), hsl(hue, saturation, lightness), hsla(hue, saturation, lightness, alpha)
• colors in hex: #ff0000
• named colors: red, green, blue, orange, pink

Single radial gradient

radial-gradient(shape size at position, start-color, ..., last-color);

Repeating radial gradient

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

• supported shapes: circle, ellipse
• suppored sizes: closest-side, closest-corner*, farthest-side, farthest-corner*
• supported sizes: in pixels (px), propoertional (%) and named directions (left, right, top, bottom, center)
• suppored color formats: (see linear gradient)

* currently ellipse shape supports only side points, you can use corner variants but there is no difference in rendering

Linear gradient

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

Radial gradient

/* Simple gradient */
radial-gradient(cyan 0%, transparent 20%, salmon 40%);

/* Non-centered gradient */
radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);

• Gradient Background for your Xamarin.Forms App - blog post
• XF Shell Gradient Flyout with Magic Gradients - blog post
• How we extended Xamarin.Forms CSS to style GradientView - blog post
• Xamarin.Forms Gradient Background For All Pages in 1 minute - blog post