Colorful Rainbow Text Generator

To create Colorful rainbow text online, you can utilize this tool that generates HTML and CSS rainbow colored text.

This tool can create text in different colors! You can make VIBGYOR color format text, random color text, or even choose your own colors. Just type or paste your sentence or paragraph in the text area. You can create colorful alphabet letters

You have the option to add color to the text in two different ways. You can choose to color each word individually or colorize all the letters in the text.

Let's look at a few examples rainbow colored text Demo rainbow text
Scroll down to see the amazing animated rainbow text.

How To Do Each Text Different Color

This tool helps you separate each letter and give them unique colors.

How to use this Rainbow Text Generator tool, follow these steps

  1. Enter Your Text: Type or paste the text you want to convert into the text area provided. You can enter a sentence, paragraph, or any language text content you want to transform into rainbow text

  2. Choose color group: Select the color scheme for your rainbow text. You can choose from various options like VIBGYOR color format, random color text, or even choose your own colors.

  3. Choose coloring method: You have the option to coloring method each letter in your text paragraph individually or color each word separately.

  4. Select gradient color option: You have the option to give the text a gradient color, allowing you to customize the color for each line, word, or letter separately.

  5. Change color brightness: You can customize the brightness of the text color to light and dark

  6. Preview and Adjust style: If you choose the random colors category, you have the option to click on the "update text" button to get even more random colors

  7. Set style: Modify text font size, adjust letter spacing style in real time, add or remove shadow effect and text stroke (outline text effect).

  8. Generate the Code: Click generate button and copy and paste the generated code onto your website

Features of this Rainbow-text tool

  • Support multiple lines of text

  • Multiple colorful gradient colors

  • Supports all types of language text (To divide letters and give coloring)

  • Each letter or word is colored separately

  • The text color can be set as a solid color or a gradient color

  • You can convert your created rainbow text into an image

  • You can make your text attractive by using Google Fonts to change the style of your font

1

Add your text here

31 /1000
Clear
Letters Splitting
English
മലയാളം हिंदी 中文 বাংলা
عربى
2

Select a color group

3

Select your preferred coloring method

Eacletteiidifferencolor
Each words is in different colors
4

Color brightness saturation lightness

When converting this text to an image, you can set a transparent background or choose a solid color for the image background.

You can copy and paste this colored text into Google Docs and Gmail Email Compose. But this color text cannot be shared directly to Facebook and Instagram. You need to convert it to an image, below is the option to convert to image format.

Font Style
Loading Google Font
Size

Rainbow Text To Image

You can convert this rainbow text into an image in PNG format. You can then easily share this image on your Facebook post or Instagram stories.

Google Font Link
Copy and Paste this code between the head tag
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag

CSS Rainbow Colors Text

Use CSS Linear Gradient to make a text with rainbow colors.

CSS Gradient Rainbow Text
HTML
<div class="css-rainbow-text">CSS Rainbow Text</div>
CSS
.css-rainbow-text {
    background: linear-gradient(90deg, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
}

CSS Animated Gradient Colorful Rainbow Text

CSS text background with a linear gradient creates a colorful rainbow effect. The colors smoothly transition from left to right.

Animated Colorful Rainbow Gradient
HTML
<div class="animated-rainbow">Animated Rainbow Gradient</div>
CSS
.animated-rainbow {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    animation: rainbow-move-left-right 5s linear infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes rainbow-move-left-right {
    0% {background-position: 0 0    }
    100% {background-position: -500px 0}
}

Text Color Rainbow Colors Effect

CSS animation that changes the text color to a rainbow colors. The animation smoothly transitions through these colors over 3 seconds, creating a dynamic rainbow effect.

Animated Rainbow Color
HTML
<div class="animated-rainbow-2">Animated Rainbow Color</div>
CSS
.animated-rainbow-2 {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    animation: rainbow-color-change 3s linear infinite alternate;
}

@keyframes rainbow-color-change{
    0% {color: #ff8b00}
    10% {color: #e8ff00}
    20% {color: #5dff00}
    30% {color: #00ff2e}
    40% {color: #00ffb9}
    50% {color: #00b9ff}
    60% {color: #002eff}
    70% {color: #5d00ff}
    80% {color: #e800ff}
    90% {color: #ff008b}
    100% {color: #ff0000}
}

How To Create Text With Rainbow Colors Using JavaScript

Let's see how to create a rainbow-colored text using JavaScript. Check out the simple code below!

This JavaScript function is designed to convert the HTML tag inner text to rainbow colored text. No need to include extra CSS codes.

JavaScript Rainbow Text
HTML
<div id="js-rainbow-1">JavaScript Rainbow Text 1</div>
<div id="js-rainbow-2">JavaScript Rainbow Text 2</div>
CSS
#js-rainbow-1, #js-rainbow-2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 50px;
}
JavaScript
class RainbowText {
    constructor(element, saturation = 100, lightness = 50) {
        if (!element) {
            return;
        }
        // script - https://www.html-code-generator.com/html/rainbow-text-generator
        // saturation = (int) between 20 - 100;
        // lightness =  (int) between 20 - 99;
        this.saturation = saturation < 20 ? 20 : saturation > 100 ? 100 : saturation;
        this.lightness = lightness < 20 ? 20 : lightness > 99 ? 99 : lightness;

        // multiple element
        if (element.length !== void 0 && element.length >= 1) {
            Array.from(element, elm => this.do_color(elm));
        } else {
            this.do_color(element);
        }
    }

    do_color(element) {
        let text = element.innerText;
        let text_length = text.length;
        if (text_length < 2) {
            return;
        }
        let span = '';
        for (let i = 0; i < text_length; i++) {
            let color = 'hsl(' + Math.round((360 * i / text_length)) + ',' + this.saturation + '%, ' + this.lightness + '%)';
            span += '<span style="color:' + color + '">' + text[i] + '</span>';
        }
        element.innerHTML = span;
    }
};
Usage
// usage
// default style
new RainbowText(document.getElementById("js-rainbow-1"));

// set color brightness
// saturation = 40;
// lightness = 50;
new RainbowText(document.getElementById("js-rainbow-2"), 40, 50);

This page was last modified on