How do I implement the text gradient effect?

Symptom

When linearGradient is set, the background color gradient instead of the text gradient is used by default. How to implement the text gradient?

Possible Causes

The linearGradient attribute is used for the component content and is drawn on the background. Therefore, if the attribute is set only for text, the effect is displayed on the background color instead of the text. The effect is as follows:

Solution

To implement the text gradient effect, use the following methods:

1. Versions earlier than API20

On the ArkTS side, crop the background color through BlendMode, which can be used to implement the cropping, mask, and brightening effects by specifying how the current pixel is mixed with the pixels below it. For details, see BlendMode.

The sample code of implementing the text gradient effect is as follows:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Row() {
        Text(this.message)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
      }
      .linearGradient({
        direction: GradientDirection.Right,
        colors: [['#ff0631f5', 0.0], ['#ff922626', 1]]
      })
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
    }
    .width('100%')
    .height('100%')
  }
}

On the C-API side, the solution is the same as the preceding one. Use NODE_BLEND_MODE and NODE_LINEAR_GRADIENT of ArkUI_NodeAttributeType to implement the text gradient.

2. Versions later than API20

Implement text gradient using ArkTS. You can use the shaderStyle attribute of Text to directly implement the text gradient. The following is an example:

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .shaderStyle({
          direction: GradientDirection.Right,
          colors: [['#ff0631f5', 0.0], ['#ff922626', 1]]
        })
    }
    .width('100%')
    .height('100%')
  }
}

For an application developed using C-API, you can use the NODE_TEXT_LINEAR_GRADIENT attribute of ArkUI_NodeAttributeType to implement text gradient.

For more text effects, see Text Effects Based on the Text Component and Common Properties.

目录

How do I implement the text gradient effect?