DEV Community

Ed is Taking Note
Ed is Taking Note

Posted on • Edited on

[CSS trick] Create a Linear Gradient Text

#css
  1. Set a linear gradient background for the text.
  2. Set -webkit-background-clip to text.
  3. Set the original text color to transparent.

Example:

.some-text {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
  -webkit-background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Result:
Image description

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Cool snippet.

Read next

kaja_uvais_a8691e947dd399 profile image

100+ Frontend Projects to level up your Skills

Kaja Uvais -

vkweb profile image

5 Free 'non-AI' Design Tools to Create Human Loving Landing Pages

Vivek Agrawal -

pagesword profile image

5 useful yet underused 👾 CSS rules

Jackie Yio Hex 🍥 -

thisdotmedia_staff profile image

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

This Dot Media -