Text overlays

Seize the attention of your website visitors by employing background gradients and image text overlays to elevate your Heading presentation. Impress them with a scroll effect that unveils your background image within the characters of your text.

In this instructional module, you will discover how to integrate text overlays into any textual content in your project by following these steps: 

1. Gradient text overlay 
2. Image text overlay
3. Fixed image text overlay

Gradient text overlay

Begin by inserting a Heading on our page and adjusting its font to a heavier weight for enhanced visibility of the text overlay within its characters: 

1. Access the Add panel
2. Drop a Heading onto the page
3. Unveil the Style panel > Typography and configure the font (e.g., “Inter 700 – Bold”)

Apply a gradient to the Heading:

1. Choose the Heading
2. Access the Style panel > Backgrounds
3. Click on the “plus” icon under Image and gradient
4. Select Linear gradient as the Type
5. Define multiple gradient stops as desired and use the color picker to assign a color for each gradient stop
6. Modify the angle of your gradient by interacting with the direction dial dot, utilizing the arrows, or inputting the angle degree directly

Learn more about background gradients. 

Note: Safari interprets (and interpolates) gradients to a transparency as “transparent black”. Thus, the transparent color might appear black to Safari users. 

Now for the enchantment — let’s implement the gradient solely to the Heading text: 

1. Select the Heading
2. Access Style panel > Backgrounds
3. Opt for “Clip background to text” from the Clipping dropdown menu

Image text overlay

Let’s append another Heading to our page:

1. Access the Add panel
2. Drop a Heading onto the page
3. Access Style panel > Typography and set the font (e.g., “Inter 700 – Bold”)

Utilize a Background image as our text overlay: 

1. Select the Heading
2. Access Style panel > Backgrounds
3. Click on the “plus” icon under Image and gradient
4. Tap on “Choose image” to designate the image for your text overlay
5. Adjust the image to Cover
6. Click a dot beneath Position to tailor how your image is exhibited (e.g., pick the lower left dot)

Find more information about background images.

We’ll repeat the same process as earlier to clip our gradient to the text: 

1. Select the Heading
2. Access Style panel > Backgrounds
3. Pick “Clip background to text” from the Clipping dropdown menu

Stable image text fillIn order to make our text behave like a cutout — a window — into our background image, we’ll follow these steps. As your visitor scrolls down the page, the Heading text discloses parts of the background image behind it.

There you have it – impress your guests with visually captivating text!