Digital Native Studios

TextMesh Pro

Color Gradients

TextMesh Pro uses vertex colors to colorize its contents. Besides using a uniform color, you can also use gradients. These gradients are applied per character.

Using Gradients

When a text object has gradients enabled, it is possible to choose four different colors, one per corner of a character's sprite. By varying some colors and keeping others identical, you can create different kinds of gradients.

Coloring one corner different produces a slight tint in the corresponding direction.

top left top right bottom left bottom right
One tinted corner.

By giving two adjacent corners the same color, you can produde horizontal and vertical gradients.

dark light
Horizontal and vertical gradients.

Character sprites are created with two triangles. As a result, gradients have a dominant direction. This is most obvious for diagonal gradients.

dark light
Diagonal gradients.

Three different colors provide more variety that just two.

same top same left same opposite 3
Three different colors.

And using four different colors leads to the most interesting gradients. Of course you don't need to pick four colors that are obviously different. You can create a dominant color transition in combination with subtler tints.

strong subtle
Four different colors, garish and subtle.

Presets

When a text object has gradients enabled, you can either define the colors for only that object, or use a gradient preset asset. When using a preset, it overrides the colors of the object itself. Editing the gradient will adjust the preset asset, which also affects all other object that use the same preset.

You can create a new preset via Assets / Create / TextMeshPro - Color Gradient.

Preset asset.