Patch Editor: Creating Color Gradients

In Spark AR Studio, you can use the Patch Editor to add colorful gradients to materials. This is a great technique for building backgrounds and adding colored filters to a scene.

Before you start

Before you can add a gradient to your effect, you'll need to add an object to your scene and create a material for it. To build the examples on this page:

  1. Click Add Object and select Rectangle. Set the Size and Width of the rectangle to Fill Height, and Fill Width, so the rectangle fills the screen of the device.
  2. Create a material for the rectangle, and set the Shader Type to Flat.
  3. Select the material, and click the arrow next to Diffuse in the Inspector, to create a patch representing this property.

Creating a gradient with 2 colors

To make a gradient with 2 colors, you'll need a Gradient patch and a Mix patch. To create these patches, right-click in the Patch Editor and select them from the menu. Change the data type for the Mix patch to Color, using the dropdown menu a the bottom of the patch.


  1. The output of the Gradient patch to the to the Alpha input port of the Mix patch.
  2. The output of the Mix patch to the Diffuse Texture input in the material patch.

Set the starting color of our gradient by adjusting the value of the first input in the Mix patch. Set the end color by changing the value of the second input port.

In the Gradient patch, the shape of the gradient is set to Horizontal by default. You can adjust this to either a vertical or circular gradient, by clicking the option inside the Gradient patch:

Creating a multicolored gradient

Use the Gradient Step patch to create multicolored gradients, where a series of colors blend together.

The first gradient step patch in your graph will create a 2 color gradient. Each Gradient Step patch you add after that will add another color to the gradient.

To build a multicolored gradient with 4 colors, right-click in the Patch Editor and select 3 Gradient Step patches from the menu, and a Gradient patch.

Connect the patches, so your graph looks like this:

You can set colors for the gradient by clicking the boxes next to Previous Step, and New Color. Adjusting the Start Range and End Range in each Gradient Step will define where each color starts and ends.

Adding color filters

A simple and effective way to add a colored filter to you scene is to simply adjust the Opacity of the material.

You could combine this technique with segmentation to show the gradient in the background of the effect only, or add different gradients to different parts of the scene.

Adding gradients to signed distance field shapes

Signed distance field patches can be used to make shapes and patterns.

In the example below, we’ve used the SDF Star patch to create a star shape. A Mix patch combines the SDF star patch with a gradient, and connects it to the Diffuse Texture property of a material applied to a particle system in the scene.

We added the gradient using a Gradient patch, and a second Mix patch. We added the colors for the gradient to the Mix patch, and connected it to the first input in the other Mix patch, to connect the gradient to the stars.

Was this article helpful?