Webflow Gradient Text: How to Create Text Gradient Effects

Click the Add Elements panel (A) and drag a Heading element onto your canvas. With the heading selected, click the Selector field at the top of the Style Panel (S) and type a class name such as 'gradient-heading'. Press Enter to apply the class. Naming the class is important because the gradient is applied to the class — making it reusable across multiple headings.

In the Style Panel, scroll to the Typography section. Click the Font Color swatch and set the color to fully transparent (alpha 0). This is the key step that many people miss — if a solid font color is still active, it will sit on top of the gradient and hide it. Setting the font color to transparent ensures the background gradient shows through.

Still in the Style Panel, scroll to the Backgrounds section. Click the '+' icon to add a new background layer. In the dropdown that appears, select 'Gradient'. A gradient editor appears with two default color stops. Click each stop to change its color — for example, set the left stop to a deep purple (#7B2FF7) and the right stop to a vivid pink (#F72F7B). Use the angle input to adjust the gradient direction (0° = vertical, 90° = horizontal, 135° = diagonal).

In the Backgrounds section of the Style Panel, find the Clipping dropdown directly below the background layer you just added. It defaults to 'None'. Click it and select 'Clip to Text'. This applies the CSS background-clip: text property, which restricts the background gradient to only render within the letterforms of your text element.

Select the gradient background layer and experiment with the settings. Change the gradient type from Linear to Radial for a sunburst effect. Drag the color stop handles along the gradient bar to shift where colors transition. Adjust the angle to align the gradient with your design layout. Increase the opacity of individual color stops to create more vibrant effects by clicking each stop and checking the 'A' (alpha) value in the color picker.

Click the Tablet breakpoint in the top bar (or use the breakpoint bar above the canvas). If your heading has a different font size on mobile, the gradient will naturally scale with it — no changes needed. However, if you want a different gradient angle or color scheme on mobile, you can override the background values at each breakpoint independently. Switch to Mobile Portrait breakpoint and adjust only what needs to change.

To create a flowing animated gradient, add a sibling or child element with a wider gradient background and use a CSS animation via a Page Settings > Before </body> Code injection. Alternatively, in the Interactions panel (H), create a Page Load trigger, set it to Loop, and animate the background-position using a Move X action on the container. For maximum browser compatibility, inject this CSS in Page Settings > Head Code: <style>.gradient-heading { background-size: 200% auto; animation: gradientShift 3s linear infinite; } @keyframes gradientShift { to { background-position: 200% center; } }</style>

1<style>
2.gradient-heading {
3  background-size: 200% auto;
4  animation: gradientShift 3s linear infinite;
5}
6@keyframes gradientShift {
7  to {
8    background-position: 200% center;
9  }
10}
11</style>