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.

VegaRise.NET

Sign In

Welcome back. Please sign in to your account.

Forgot password?
or

Don't have an account? Create an account

By signing in, you agree to our Terms of Service and Privacy Policy.