Communik.io : Site & App builder
communik.io

Apply a gradient to text

Choose the direction and colours inside the letters, then return to a solid text colour.
Published on 11/5/2026

A text gradient varies the colour inside the letters. Apply it through Color using visual controls, without writing code. A large heading makes the result easy to compare; a solid colour is often more readable for a small paragraph.

1. Open the text colour

In Expert, select the text and open its colour in Text. If missing, add Color with the group's + button.

This is the text colour, not the block's general background setting.

2. Enable the gradient

Choose the Gradient tab. Initial values make the effect visible inside the letters. The text's background carries the gradient and is clipped to the letter shapes; the solid letter colour becomes transparent so that background can show through.

Do not apply an opaque letter colour while trying to retain this effect.

The text colour control switched to Gradient.

3. Choose the direction

Open the direction control and compare the available orientations on the real heading. The video chooses a diagonal. The control's thumbnail is a useful hint, but the actual text and its background are the final reference.

4. Choose the colour stops

From is the start and To is the end. Via adds an intermediate colour. Open each colour to choose its shade. The recording compares a medium primary shade with a darker one.

The position handles move the colour stops within the gradient, not the text itself. Choose distinct colours, then make sure every part of every letter remains readable on its real background.

Two primary shades selected as gradient stops.
A diagonal gradient inside the heading letters.

5. Return to a solid colour

Reopen the text colour and switch from Gradient to Color. This removes the gradient and restores a solid letter colour. You can then choose another shade.

No class editing is necessary. Undo can also recover a previous choice. Save and reload after your final decision.

The heading after returning to a solid colour.

Continue

Format selected words · Change an element's background