Gradient Text Class for Headings
Adds a "wpide-gradient-text" class that fills a heading's letters with a color gradient, for standout hero titles and highlighted words.
Opens WPIDE on
Code
.wpide-gradient-text {
background: linear-gradient(90deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #6366f1;
}
@media (forced-colors: active) {
.wpide-gradient-text {
-webkit-text-fill-color: currentColor;
background: none;
}
}Notes
Add the class to a Heading block, or wrap a few words in a span with the class using the HTML editor. Change the two colors to your brand.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.