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.
![64b94a610d7daab0f3c36388_6046b5c2d9930025e260deca_qcjyhnr1uesc3x9bw-tvank5-z7mnkc8fj1t9rp8f5feawrfv22ugqgflak5omv0prtkado4yo_m1uznur6gop0vtedr48ny4pe9h4tgldrda_gdocl5jwfeeekmesyyrrxfp_re A Heading is filled with gradient color that spans from purple to red to orange by using background Clipping.](https://webflow-s3.tenten.co/2024/04/64b94a610d7daab0f3c36388_6046b5c2d9930025e260deca_qcjyhnr1uesc3x9bw-tvank5-z7mnkc8fj1t9rp8f5feawrfv22ugqgflak5omv0prtkado4yo_m1uznur6gop0vtedr48ny4pe9h4tgldrda_gdocl5jwfeeekmesyyrrxfp_re.png)
In this instructional module, you will discover how to integrate text overlays into any textual content in your project by following these steps:
- Gradient text overlay
- Image text overlay
- 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:
- Access the Add panel
- Drop a Heading onto the page
- Unveil the Style panel > Typography and configure the font (e.g., “Inter 700 – Bold”)
Apply a gradient to the Heading:
- Choose the Heading
- Access the Style panel > Backgrounds
- Click on the “plus” icon under Image and gradient
- Select Linear gradient as the Type
- Define multiple gradient stops as desired and use the color picker to assign a color for each gradient stop
- 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.
![64b94a610d7daab0f3c36382_6046b5c1f2b7bb4db4071196_5xsiuminbeuwmn8uhrl7o2amaoaff-e_4wb8er1uilbsg9_dk_xlzxdiqgyrfbiqj2nxilz4hwc6aekvsdz2ce7olzspms2ggruvb_csqtankuoqgmmpapnmm2bvtlc_yrwklact Background gradient colors for text are set to span from purple to red to orange.](https://webflow-s3.tenten.co/2024/04/64b94a610d7daab0f3c36382_6046b5c1f2b7bb4db4071196_5xsiuminbeuwmn8uhrl7o2amaoaff-e_4wb8er1uilbsg9_dk_xlzxdiqgyrfbiqj2nxilz4hwc6aekvsdz2ce7olzspms2ggruvb_csqtankuoqgmmpapnmm2bvtlc_yrwklact.png)
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:
- Select the Heading
- Access Style panel > Backgrounds
- Opt for “Clip background to text” from the Clipping dropdown menu
![64b94a610d7daab0f3c36374_6046b5c2ef189c1c9c78811a_prpsb1tqbbttmtzp3dbbj4y8jear5wevv2zg0iqmu3gysb6m9_qegnnl367ihmbw7dgboouk-k76bpddvku-gdq0t60qik4oidpmw7k4xpya407nulnbywcd2jz1go8fq-boyeff “Clip background to text” is selected under Clipping in the Style panel’s Backgrounds section to clip a gradient to text.](https://webflow-s3.tenten.co/2024/04/64b94a610d7daab0f3c36374_6046b5c2ef189c1c9c78811a_prpsb1tqbbttmtzp3dbbj4y8jear5wevv2zg0iqmu3gysb6m9_qegnnl367ihmbw7dgboouk-k76bpddvku-gdq0t60qik4oidpmw7k4xpya407nulnbywcd2jz1go8fq-boyeff.png)
![64b94a610d7daab0f3c3637c_6046b5c20cc5c5c3db502863_wwzqqzvmqrbhsiw_7zkbv5u3smmdqpa0djino9alq_q1txcvu8xhez7r_tvoev-_oegy0ouxfewx2qgmptmhjlbkb08yvlmt2_qiyl2hqgfpluqgoyengkevuovyvpyuvma52cpl A Heading is filled with gradient color that spans from purple to red to orange by using background Clipping.](https://webflow-s3.tenten.co/2024/04/64b94a610d7daab0f3c3637c_6046b5c20cc5c5c3db502863_wwzqqzvmqrbhsiw_7zkbv5u3smmdqpa0djino9alq_q1txcvu8xhez7r_tvoev-_oegy0ouxfewx2qgmptmhjlbkb08yvlmt2_qiyl2hqgfpluqgoyengkevuovyvpyuvma52cpl.png)
Image text overlay
Let’s append another Heading to our page:
- Access the Add panel
- Drop a Heading onto the page
- Access Style panel > Typography and set the font (e.g., “Inter 700 – Bold”)
Utilize a Background image as our text overlay:
- Select the Heading
- Access Style panel > Backgrounds
- Click on the “plus” icon under Image and gradient
- Tap on “Choose image” to designate the image for your text overlay
- Adjust the image to Cover
- 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.
![64b94a610d7daab0f3c36378_6046b5c2ef2ec4540a0d4dba_uzfb-a8jjevbzgzjrgbxptlcjjupzjxy2bo4dfzns7tfume4pvebj2gzft4u7homgibuioir0_9maeydpj9gvjgh7m_gvxdz6z5dv_9c4li36zl1mik8i8zo0ozuuq4cul72b-ym A background image of pink clouds is set to Cover a Heading with its image position in the bottom left corner of the Heading it’s affecting.](https://webflow-s3.tenten.co/2024/04/64b94a610d7daab0f3c36378_6046b5c2ef2ec4540a0d4dba_uzfb-a8jjevbzgzjrgbxptlcjjupzjxy2bo4dfzns7tfume4pvebj2gzft4u7homgibuioir0_9maeydpj9gvjgh7m_gvxdz6z5dv_9c4li36zl1mik8i8zo0ozuuq4cul72b-ym.png)
We’ll repeat the same process as earlier to clip our gradient to the text:
- Select the Heading
- Access Style panel > Backgrounds
- Pick “Clip background to text” from the Clipping dropdown menu
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024