Xamarin.Forms control to display complex gradients, insipired by PancakeView and Magic Gradients. You can add unlimited amount of linear gradients with different angles to create uniqe effects. Powered by SkiaSharp.
Initial release is available via NuGet as a prerelease version (make sure you have checked Include prerelase
in NuGet browser).
Package | Version |
---|---|
MagicGradients |
Xamarin.Forms | SkiaSharp |
---|---|
You can preview some of the gradients from Gradient Magic in Playground app. Css code is directly copied, without any modifications.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Install via NuGet (make sure you have checked Include prerelase
in NuGet browser) 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:
<magic:GradientView VerticalOptions="FillAndExpand">
<magic:GradientView.GradientSource>
<magic:GradientSource>
<magic:LinearGradient Angle="45">
<magic:GradientStop Color="Red" Offset="0" />
<magic:GradientStop Color="Yellow" Offset="1" />
</magic:LinearGradient>
</magic:GradientSource>
</magic:GradientView.GradientSource>
</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 function linear-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
You can embed inline CSS directly in xaml:
<magic:GradientView>
<magic:GradientView.GradientSource>
<magic:CssGradientSource>
<x:String>
<![CDATA[
linear-gradient(242deg, red, green, orange)
]]>
</x:String>
</magic:CssGradientSource>
</magic:GradientView.GradientSource>
</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.
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
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
/* 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);