Color gradients

You can apply gradients of up to four colors to text. When you add a color gradient, TextCore applies gradient colors to each character in a text string.

Use the the <gradient> rich text tags to apply color gradient presets to text objects. A gradient preset overrides the text’s local gradient type and colors.

Create a color gradient preset

To create a color gradient with one or more colors, and place it in a specific folder, follow these steps:

From the menu, select Assets > Create > Text > Color Gradient to add a new color gradient preset.
In the Color Gradient’s Inspector window, select a color mode from the dropdown menu:
- Single: Applies a single color.
- Horizontal Gradient: Applies two colors and produces a side-to-side transition between them on each character.
- Vertical Gradient: Applies two colors and produces an up-and-down transition between the two on each character.
- Four Corners Gradient: Applies four colors. Each color radiates from its assigned corner of each character.
Set the gradient colors. The number of colors available in the Colors field depends on the gradient mode you choose. Each swatch corresponds to the color’s origin on a character sprite.
Place the color gradient asset into the path set for the Color Gradient Presets in the Panel Text Setting asset.

Apply color gradient presets

To apply a color gradient preset to text, reference the color gradient by name as <gradient="name-of-the-color-gradient">Your text</gradient>. If you apply the color gradient like this, the color of the text is multiplied by the object’s current vertex colors.

To apply the pure gradient to a selection of text, use a <color> tag to reset the color to white. For example:

<color=white><gradient="Light to Dark Green - Vertical">Light to Dark Green gradient</gradient></color>

Color gradient mode examples

The following shows color gradient examples for each mode.

Single color

A single-color gradient.

Horizontal gradients

A side-to-side gradient with two colors.

Text with color transition from yellow to black side-to-side for each character.

Text with color transition from black to yellow side-to-side for each character.

Vertical gradients

An up-and-down gradient with two colors.

Text with color transition from black to yellow up-and-down for each character.

Text with color transition from yellow to black up-and-down for each character.

Four corner gradients

A gradient with four colors. Each color radiates from one corner. This is the most versatile gradient type. You can vary some colors and keep others identical to create different kinds of gradients.

Text with four-color gradient for each character with yellow on the up-left, black on the up-right, red on the down-left, and green on the down-right.

This example shows three corners with one color and the fourth with a different color.

Text with four-color gradient for each character with black on the up-left and yellow for the other corners.

This example shows pairs of adjacent corners with the same color to create horizontal or vertical gradients.

Text with four-color gradient for each character with black on the left up and down, and yellow on the right up and down.

Text with four-color gradient for each character with black on the up left and right, and yellow on the down left and right.

This example shows pairs of diagonally opposite corners the same color to create diagonal gradients.

Text with four-color gradient for each character with black on the up-left and down-right, and yellow on the up-right and down-left.

Text with four-color gradient for each character with yellow on the up-left and down-right, and black on the up-right and down-left.

This example creates horizontal and vertical three-color gradients with a dominant color at one end and a transition between two colors at the other.

Text with four-color gradient for each character with yellow on the left up and down, red on the up-right, and black on the down-right.

Text with four-color gradient for each character with yellow on the up left and right, red on the down-left, and black on the down-right.

This example gives two diagonally opposite corners the same color and the other two corners different colors to create a diagonal stripe three-color gradient.