How to Generate Gradient text using CSS

Kareem Dabbeet — Wed, 27 Jul 2022 12:57:00 +0000

Recently, Gradient Text is being used more on popular sites and becoming a trend!

Both Vuejs and Netlify are using gradient text on their hero scetion in the homepage!

Have you ever wondered how to achieve this style using CSS only?

In this article, I want to show you how a use an easy website to generate CSS gradient text, and how to implement it manually using CSS only.

how to Generate CSS Gradient Text using an online website:

I've published a helpful website: CSS gradient text | free online gradient text generator.

🔗 Website URL: cssgradienttext.com

Using this tool, you customize gradient colors (add, remove, re-order them) and angle, then copy the generated code!

I'm looking forward to getting your feedback and suggestions in the comments below!.

how to Manually Implement Gradient Text using CSS only

The idea behind this is only to set three different CSS properties to the text we want to style:



div {

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background: // your gradient here

}

How does it work?

the first property is -webkit-background-clip which is responsible for only rendering the background where there's text.

Second property is text-fill-color which is set to transparent. because we want to hide the text to be able to show the gradient background behind it!.

Third property is simple which is: background-image: linear-gradient(45deg, #f3ec78, #af4261);. you can change the angle, and colors, and add multiple colors.

Check Mozilla Docs for linear-gradient to see all options.

If you want to see more cool things You can hit the Follow Button! I'll regularly add more content related to CSS, Javascript, Vue, and Nuxt in the future!

Thank you for reading 🤓

DEV Community: Kareem Dabbeet

How to Generate Gradient text using CSS

how to Generate CSS Gradient Text using an online website:

how to Manually Implement Gradient Text using CSS only

How does it work?