Creating Color Gradients

Get Started

Spark AR Studio
Spark AR Hub
Features
Learn
Creators
Partners
Blog
Community

Create AR effects for Instagram and Facebook.
Get Started

Patch Editor: Creating Color Gradients

Have a question?

Ask the community

Setting up your project

Start by opening a new project in Spark AR Studio and adding a rectangle.

The rectangle will render the color gradient in the scene, and later be used to create a color filter that covers the whole scene. You can experiment with gradients using any other object, if you prefer. To add a rectangle:

In the Scene panel, click Add Object.
Select a Rectangle from the menu.

Make a couple of edits to the rectangle's properties in the Inspector. These edits will make the rectangle cover the device screen. Set

Width to Fill Width.
Height to Fill Height.

Editing the rectangle's properties in the Inspector.

Next create a material for the rectangle. You'll use the Patch Editor to add the gradient effect to this material. To create a material:

In the Inspector, go to Materials and click +.
Select the material in the Assets panel.
In the Inspector, set the Shader Type to Flat.

Opening the Patch Editor

Now it's time to open the Patch Editor, and create a patch to represent your material.

The patch representing your material will be connected to a series of gradient patches, rendering the gradient in the scene.

To create this patch:

In the Assets panel, select the material.
In the Inspector, go to Diffuse and click the arrow next to Texture.

This will open the Patch Editor and add a yellow patch representing the material:

The material patch can be seen in the Patch Editor.

Creating a gradient with 2 colors

You'll add 2 more patches to create a gradient with 2 colors - a Gradient patch and a Mix patch:

Right-click in the Patch Editor to open the patch menu.
Search for and select the Gradient and Mix patches.

You'll now see 3 patches in the Patch Editor:

Three patches are shown in the Patch Editor.

In the Mix patch, use the dropdown menu at the bottom of the patch to change the data type to Color:

Adjusting the Mix patch data type. Color is highlighted.

Now connect the patches. Connect:

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

Setting the colors

Set colors for the gradient by adjusting the values in the Mix patch. The color set in the top of the patch will be the starting gradient. Below, we've added colors to the Mix patch:

Here's how the gradient appears:

The gradient rectangle is shown in the Inspector and Viewport.

Changing the gradient's shape

The shape of the gradient is Horizontal by default. You can adjust this to either a vertical or circular gradient by choosing an option from the dropdown menu inside the patch.

Gradients with more than 2 colors

Use the Gradient Step patch to blend a series of more than 2 colors together.

The first Gradient Step patch in a graph creates a 2 color gradient. Each Gradient Step patch added after that adds another color.

To build a gradient with 4 colors, start by creating the patches. Right-click in the Patch Editor and select:

3 Gradient Step patches
1 Gradient patch.

To build the graph, connect:

The output of the Gradient patch to the Gradient input in a Gradient Step patch
The outputs of the Gradient Step patch to the top 2 inputs in another Gradient Step patch.
The Output port in your final Gradient Step patch to the Diffuse Texture input in a material patch.

Here's how your graph will look:

Set colors for the gradient in the boxes next to Previous Step and New Color.

Adjusting the Start Range and End Range in each Gradient Step patch will define where each color starts and ends.

Making a gradient filter

Easily add a colorful filter to your scene by adjusting the Opacity property of the material your gradient is applied to in the Inspector.

The opacity of the rectangle has been changed, and you can now see the user in the Simulator and Viewport.

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.