VegaRise.NET

Gradient

A Gradient is a list of GradientStops plus either aLinearShade or a PathShade. Use it inside aTextEffect.GradientFill, a shape's Fill.GradientFill, or any other fillable element.

Linear Gradient

Use case: Fill text with a smooth red→yellow→green gradient.

C#
1using System.Collections.Generic;
2using Vega.DOM;
3using DOM.Elements.Graphics.Colors;
4
5var gradient = new Gradient
6{
7 GradientStops = new List<IGradientStop>
8 {
9 new GradientStop { StopColor = Color.Red, StopPosition = 0 },
10 new GradientStop { StopColor = Color.Yellow, StopPosition = 50 },
11 new GradientStop { StopColor = Color.Green, StopPosition = 100 },
12 },
13LinearShade = new LinearShade { Angle = 45, Scaled = true },
14};
15
16var style = new TextStyle
17{
18 Font = new Font { Latin = new FontPart { FontName = "Impact", Size = new FontSize(48) } },
19 TextEffect = new TextEffect { GradientFill = gradient },
20};

Path (Radial) Gradient

Use case: Create a radial fill from the centre of a shape.

C#
1var radial = new Gradient
2{
3 GradientStops = new List<IGradientStop>
4 {
5 new GradientStop { StopColor = Color.White, StopPosition = 0 },
6 new GradientStop { StopColor = Color.Blue, StopPosition = 100 },
7 },
8PathShade = new PathShade
9{
10 PathShadeType = PathShadeTypeValues.circle,
11 FillToRectangle = new FillToRectangle { Top = 0, Left = 0, Right = 100, Bottom = 100 }
12}
13};

Gradient with Transparency

Use case: Fade one end of the gradient to fully transparent.

C#
1var fadeOut = new Color(0, 0, 0, 0); // A=0 => fully transparent
2
3var g = new Gradient
4{
5 GradientStops = new List<IGradientStop>
6 {
7 new GradientStop { StopColor = Color.DodgerBlue, StopPosition = 0 },
8 new GradientStop { StopColor = fadeOut, StopPosition = 100 },
9 },
10LinearShade = new LinearShade { Angle = 90, Scaled = true }
11};

Frequently asked questions

Can I mix LinearShade and PathShade?

No — they're mutually exclusive. Choose one or neither.

Can I apply a gradient to a table cell?

Yes — set the cell's fill (or TextStyle for its text) to a gradient-fill capable object.

VegaRiseVDocs.NET

Reset Password

Enter your email and we'll send you a link to reset your password.

Remember your password? Sign in