CSS Rainbow Text Effect To Spice Up Your Web Design
Tags: css, text, webdev, design
Published: 2023-11-03 12:00:16

**ORIGINAL ARTICLE:** [CSS Rainbow Text](https://www.coding-dude.com/wp/css/css-rainbow-text/)

Imagine making your website or project look super cool with colorful text that looks like a rainbow. Learning how to do this using CSS (a fancy code for making things look good on the web) can be a fun and useful skill.

In this article, I'll show you different ways to make this **CSS rainbow text**, and I'll even make it move around with cool animations. I'll give you the secret code (HTML and CSS) to make it happen, and you can try it out on CodePen. So, get ready to learn and make your web stuff look awesome with rainbow text!

So, here are 5 methods for creating a rainbow text effect:

## Method 1 - Rainbow Text with CSS Linear Gradient

{% codepen https://codepen.io/inegoita/pen/vYzoXor %}

Alternatively, we can make the rainbow without the gradient transitions and display the rainbow as stripes. 

Here’s the code and result of that:

{% codepen https://codepen.io/inegoita/pen/PodMbYX %}

## Method 2 - Rainbow Text In CSS Using Text Shadows

{% codepen https://codepen.io/inegoita/pen/qBLQPKx %}

I’m using the CSS variable `--shadow-space` to offset each rainbow text color by a configurable amount. This method will come in handy below where I will show you how to create a CSS rainbow text animation.

`text-shadow` can be used for multiple text effects. A while back I’ve shown [how to create a text outline](https://www.coding-dude.com/wp/css/css-stroke-text/) using it.

## Method 3 - Rainbow Text Using CSS & Rainbow Texture

This is probably the most commonly used method for making a rainbow text in CSS. Simply using an image or texture as the background image for a text and using the exact same method as for the CSS rainbow gradient text.

This method is less flexible and it requires the rainbow texture image. Of course you can learn [how to make a rainbow in Photoshop](https://www.psd-dude.com/tutorials/creating-a-cartoon-rainbow.aspx) or make one from scratch in [MockoFun](https://www.mockofun.com/). But, it might be simpler to just download this [free rainbow pattern](https://www.textures4photoshop.com/tex/abstract/rainbow-pattern.aspx) or this [free rainbow gradient texture](https://www.textures4photoshop.com/tex/abstract/rainbow-gradient.aspx) from Textures4Photoshop.

{% codepen https://codepen.io/inegoita/pen/QWYKZGy %}

## Method 4 - Use an Online Tool For Creating Rainbow Text

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns5ympt6gqglnksd1cr0.gif)](https://www.mockofun.com/template/rainbow-font-generator/)

The fastest and most convenient method to add a rainbow text effect in your HTML is by using a simple graphic design app like MockoFun. This app offers premade template, and as it happens it has an easy to use and 100% free [rainbow text generator](https://www.mockofun.com/template/rainbow-font-generator/).

You open it, input your text and download the end result as an image (JPG, WebP, PNG, etc). These images are perfectly fine to use in your HTML webpage instead of the making a pure CSS rainbow text.

And now, some CSS animated rainbow text effects:

## Animated Rainbow Gradient Text CSS

{% codepen https://codepen.io/inegoita/pen/BaMLGWR %}

## CSS Animated Rainbow Text Shadow

{% codepen https://codepen.io/inegoita/pen/RwvGqeK %}

In Conclusion
So, now you know several methods how to make a HTML rainbow text with CSS. There are so many uses for a rainbow color text in web pages especially because the rainbow is a symbol for many things.

## You can follow me

My blog: [coding-dude.com](https://www.coding-dude.com/)
Twitter: [@codingdudecom](https://twitter.com/codingdudecom)