Start adding gradient headings to your Webflow or Elementor sites, just like Apple does, in 2 steps.

To keep things simple and short I'm going to use a background image instead of a generated gradient.

Step 1/2: Add background image to the heading

You can grab a free gradient file from this Free Mesh Gradient Collection.

As always, convert to WebP files, and try to keep files below 50kB when possible.

100 free mesh gradients
100 free mesh gradients
Add a background image to the heading in Webflow
Add a background image to the heading in Webflow
Add a background image to the heading in Webflow
Add a background image to the heading in Elementor

The easiest way is to upload a gradient image to the heading itself as a background image, and set the Size to Cover in both Webflow and Elementor.

I grabbed a mesh gradient from this website which has a ton of them.

Step 2/2: Clip the background to the text

In Webflow go to BackgroundsClipping -> choose Clip Background to Text.

And in Elementor add this CSS code to every heading in the Custom CSS box.

selector .elementor-widget-container {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

Gradient recipes

There’s so much you can do with this effect, like setting just one word to have a gradient background, or make your own gradient instead of using an image.

For Webflow: You can add the CSS code, and use the class name used.

For Elementor: You can add the background-image line to the CSS code mentioned above.

Apple Intelligence gradient

Apple intelligence
Create this Apple Intelligence gradient
.gradient-apple {
    background-image: linear-gradient(108deg,#0894FF,#C959DD 34%,#FF2E54 68%,#FF9004);
}

Instagram gradient

See the Pen Instagram Gradient Heading by Roy Eyal (@royeyal) on CodePen.

.gradient-ig {
    background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

You can add this class to as a span tag, and will color only the selected word. For example:

Check out my <span class="gradient-ig">Instagram</span>

Fancy gradient

See the Pen Lit text by Chris Coyier (@chriscoyier) on CodePen.

All you need is this line:

.gradient-fancy {
    background-image: radial-gradient(circle farthest-corner at center center, white, #111) no-repeat;
}

Joy of React gradient

From Joy of React (best React course BTW).

The Joy of React
.purple-gradient {
    background-image: linear-gradient(45deg, rgb(115, 43, 247) 0%, rgb(125, 48, 248) 13%, rgb(134, 52, 249) 19%, rgb(143, 57, 249) 23%, rgb(155, 66, 250) 27%, rgb(164, 70, 251) 31%, rgb(172, 75, 251) 34%, rgb(180, 79, 252) 38%, rgb(188, 83, 253) 41%, rgb(196, 88, 253) 44%, rgb(203, 93, 254) 47%, rgb(212, 102, 255) 50%, rgb(216, 117, 255) 53%, rgb(222, 133, 255) 56%, rgb(226, 148, 255) 59%, rgb(231, 158, 255) 62%, rgb(236, 173, 255) 66%, rgb(240, 189, 255) 69%, rgb(243, 199, 255) 73%, rgb(246, 214, 255) 77%, rgb(250, 230, 255) 81%, rgb(252, 240, 255) 87%, rgb(255, 255, 255) 100%);
}
Text that says Tutorial Hell and colored like fire

Joy of React fire text effect

.gradient-fire {
    background-color: rgb(255, 171, 36);
    background-image: linear-gradient(10deg, rgb(220, 4, 98) 0%, rgb(229, 21, 90) 13%, rgb(237, 38, 81) 19%, rgb(244, 52, 71) 23%, rgb(249, 65, 62) 27%, rgb(253, 79, 48) 31%, rgb(255, 94, 36) 34%, rgb(255, 104, 10) 38%, rgb(255, 123, 0) 41%, rgb(255, 141, 10) 44%, rgb(255, 153, 20) 47%, rgb(255, 171, 36) 50%, rgb(255, 184, 51) 53%, rgb(255, 198, 66) 56%, rgb(255, 212, 82) 59%, rgb(255, 224, 102) 62%, rgb(255, 226, 122) 66%, rgb(255, 232, 148) 69%, rgb(255, 236, 168) 73%, rgb(255, 241, 189) 77%, rgb(255, 246, 214) 81%, rgb(255, 251, 235) 87%, rgb(255, 255, 255) 100%);
}

You can generate your own colors using his Gradient Generator.

Web Design Secrets, Part 6: Gradient Headings
Web Design Secrets, Part 5: Bento girds
Web Design Secrets, Part 4: Mouse Follower
Web Design Secrets, Part 3: Secondary Animation
Web Design Secrets, Part 2: Staggered Text Reveal Animation
Web Design Secrets, Part 1: Smooth Scrolling
How to add "Paper" to your web design
Relume AI Website Builder
No more unbalanced headlines in your design
Fill text on scroll with GSAP and ScrollTrigger
Design Better Countdown Timers
Emoji Confetti
Text Stroke Effect
Stretched letter effect using variable fonts

Got a Question?

Get an Answer!

If something's not clear, drop a question on my Instagram and I'll update my tutorial if needed.

More videos

Some of the links on this page are affiliate links, meaning I may receive a commission if you follow them. This allows me to continue providing free content and educational resources for you, and for you it changes nothing. Also, I 100% stand behind every product I recommend. Thank you for supporting my small business