• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Design, Tutorial, WordPress

How to Add Rainbow Text To WordPress

CMDR Mitchcraft

Reading time: 1 minute
blue and yellow abstract painting

I’ve been tinkering with the theme on this website, and I’m been very happy with how things have come out. I have a soft spot for gradients, especially with the ‘punk’ color scheme I’ve been using on my branding.

One question I get, consistently: “How can I achieve the rainbow gradient text effect”?

It’s actually really easy to do.

I have a helper class I’ve added to the CSS file in this child theme (a child theme of Ollie, by the way), with code similar to this:

.--is-rainbow{
    background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
    background-clip: text !important;
    -webkit-background-clip: text; /* For WebKit browsers */
    color: transparent;
    -webkit-text-fill-color: transparent; /* For older WebKit browsers */
}

This code does three things:

  • Sets the gradient color as a linear gradient spanning the background of the element
  • Uses background-clip and webkit-background-clip to tell the element to use the text as the borders for clipping
  • Uses color and -webkit-text-fill-color to set the font color to a transparent value to allow the background to show through

Once this code is in, it’s as easy as adding the class in the “Advanced” section of the editor sidebar.

And… voila! Rainbow text, usable on any text element in your WordPress block-based website.

Note: if you aren’t running a block-based theme, simply add the class --is-rainbow to your element in the HTML code and the rainbow will appear just the same!

css, Tutorial, WordPress
  • WordPress 3.9: An Early Overview

    WordPress 3.9: An Early Overview

    Reading time: 3 minutes

    With the release of WordPress 3.9 beta 1 on March 11, everyone is (or should be) ensuring their plugins and themes are ready for the update.  There’s a lot of exciting things coming from this update, and it’s easy to overlook some of the more technical (but still important) aspects being added into WordPress.  There’s…

    WordPress
  • Why I (Still) Use WordPress

    Why I (Still) Use WordPress

    Reading time: 2 minutes

    It’s no secret that I love WordPress. I’ve built this site on it, for one, but I brag that I’ve used WordPress for nearly all of the projects I’ve done over the last few years.  Other platforms have come and gone, but WordPress has remained steadily at the top of my list of “must-use” tools.…

    WordPress