[CSS trick] Create a Linear Gradient Text
Ed is Taking Note
Posted on May 27, 2022
- Set a linear gradient background for the text.
- Set -webkit-background-clip to text.
- 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;
}
💖 💪 🙅 🚩
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
tailwindcss Implementing Dark Mode and Theme Switching using Tailwind v4 and Next.js
November 29, 2024