Using linear gradient

Use a linear gradient to show transitions between two or more colors along a straight line.

To paint a shape node with a linear gradient, use:

• Linear Gradient Brush for a 2D shape node. See Painting a 2D shape node with a linear gradient.

• LinearGradientMaterial for a 3D shape node. See Painting a 3D shape node with a linear gradient.

Painting a 2D shape node with a linear gradient

Use a Linear Gradient Brush to paint the fill or stroke of a 2D shape node with a linear gradient.

To paint a 2D shape node with a linear gradient:

1. In the Library press Alt and right-click Materials and Textures, select Linear Gradient Brush, and name the brush.

   

2. Create or select a 2D shape node where you want to show the linear gradient.

   For example, in the Node Tree create a Rectangle 2D node.

   

3. In the Properties add the Foreground Brush or Stroke Brush property, and set it to the linear gradient brush that you created.

   For example, add the Foreground Brush property, and set it to the Linear Gradient Brush.

   This way you fill the 2D shape node with the gradient that the Linear Gradient Brush draws.

   

4. In the Properties click next to the property that you added in the previous step to go to the Linear Gradient Brush used by that property, and add and set:

   • Gradient Stops to a comma-separated list of gradient color stops. See Gradient color stops.

     For example, to create a gradient from red to green to blue, set Gradient Stops to:

     red 0, rgb(0, 192, 0) 50%, rgb(25, 25, 192) 75%
     

     

   • Gradient Start and Gradient End to set where in the node area the linear gradient starts and ends.

     You can set the Gradient Start and Gradient End properties either in the Linear Gradient Brush or in a 2D shape node that uses the Linear Gradient Brush.

     

   • Gradient Spread Method to set how to fill the shape outside the gradient:

     • Pad uses the color at the end of the gradient to fill the rest of the region.

     • Repeat repeats the gradient pattern to fill the region.

     • Reflect mirrors the gradient pattern to fill the region.

     

Painting a 3D shape node with a linear gradient

Use the LinearGradientMaterial to paint the fill or stroke of a 3D shape node with a linear gradient.

To paint a 3D shape node with a linear gradient:

1. In the Asset Packages click + Add Asset Source and in the directory where you extracted the Kanzi Shapes package select the assets/Shapes directory.

   After you add the asset source, you see in the Asset Packages window the materials included in the Shapes asset package.

   When you add an asset source to Kanzi Studio, you make that asset source available to all your Kanzi Studio projects.

   

2. In the Asset Packages right-click the LinearGradientMaterial and select Import Asset Package.

   Kanzi Studio adds the LinearGradientMaterial material to the Library > Materials and Textures > Materials.

   

3. Create or select a 3D shape node where you want to show the linear gradient.

   For example, in the Node Tree create a Rectangle 3D node.

   

4. In the Properties add the Fill Material or Stroke Material property, and set it to the LinearGradientMaterial material.

   For example, add the Fill Material property, and set it to the LinearGradientMaterial.

   This way you fill the shape with the gradient that the LinearGradientMaterial draws.

   

5. In the Properties click next to the material property that you added in the previous step to go to the LinearGradientMaterial material, and add and set:

   • Gradient Stops to a comma-separated list of gradient color stops. See Gradient color stops.

     For example, to create a gradient from red to green to blue, set Gradient Stops to:

     red 0, rgb(0, 192, 0) 50%, rgb(25, 25, 192) 75%
     

     

   • Gradient Start and Gradient End to set where in the node area the linear gradient starts and ends.

     You can set the Gradient Start and Gradient End properties either in the LinearGradientMaterial or in a 3D shape node that uses the LinearGradientMaterial.

     

   • Gradient Spread Method to set how to fill the shape outside the gradient:

     • Pad uses the color at the end of the gradient to fill the rest of the region.

     • Repeat repeats the gradient pattern to fill the region.

     • Reflect mirrors the gradient pattern to fill the region.

     

See also

Gradients

Using radial gradient

Using sweep gradient

Filling a shape

Using stroke