css

[CSS trick] Create a Linear Gradient Text

edindevto

Ed is Taking Note

Posted on May 27, 2022

[CSS trick] Create a Linear Gradient Text
  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

💖 💪 🙅 🚩
edindevto
Ed is Taking Note

Posted on May 27, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related