# 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.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: typography, gradient, headings, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-gradient-text/

## Code

```css
.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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Gradient Text Class for Headings" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/