&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Enter Text Here:
    




Rainbow Text Generator Multi Color Text Tool 2023

How to create online rainbow text. Here is the tool for creating HTML rainbow text

This tool generates multi-color text, VIBGYOR color format text, and random color text. Type or paste a sentence or paragraph text in the text area.

Maximum allowed 1000 characters. There are two types of text colorization, one for coloring each letter and the other for coloring only the words.

 

CSS Animated Rainbow Text

Animated Linear

 

Animated Color

 

Rainbow Stroke

 

CSS linear gradient rainbow colors text

CSS 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: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-size 50px;
    font-weight: bold;
    display: inline-block;
}

Edit Code

CSS Flame Text

Flame Text

HTML

<div class="css-flame-text">CSS Flame Text</div>

CSS

.css-flame-text {
    background-image: linear-gradient(0deg, #f00 25%, #ffb300 60%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-size 50px;
    font-weight: bold;
    display: inline-block;
}

Edit Code

CSS Christmas Colors Text

Christmas Colors

HTML

<div class="css-christmas-color">CSS Christmas Color Text</div>

CSS

.css-christmas-color {
    background: linear-gradient(90deg, #ad000c, #dd0010, #d1d1d1, #1ece35, #00ad2b);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
}

Edit Code

How To Generate Rainbow Colored Text In JavaScript

This JavaScript function will convert the DIV tag text to rainbow-colored text. No need to add other 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;
    font-weight: bold;
    font-size 50px;
}

JavaScript

class RainbowText {
    constructor(element, saturation = 100, lightness = 50) {
        // script - https://www.html-code-generator.com/html/rainbow-text-generator
        // saturation = (int) between 20 - 100;
        // lightness =  (int) between 20 - 99;
        if (!element) {
            return;
        }
        this.saturation = saturation < 20 ? 20 : saturation > 100 ? 100 : saturation;
        this.lightness = lightness < 20 ? 20 : lightness > 99 ? 99 : lightness;
        if (element.length !== void 0 && element.length >= 1) {
            for (let i = 0; i < element.length; i++) {
                this.do_color(element[i]);
            }
        } 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++) {
            span += '<span style="color:hsl(' + Math.round((360 * i / text_length)) + ',' + this.saturation + '%, ' + this.lightness + '%)">' + text[i] + '</span>';
        }
        element.innerHTML = span;
    }
};


JavaScript Usage

// default
new RainbowText(document.getElementById("js-rainbow-1"));

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

 

One technique for adding a rainbow is to do stacked text shadows. In this model, I have 9 distinct text shadows generally offset by 4px. For instance, the main shadow is - 4px 4px #ef3550,. The principal negative worth places the shadow on one side of the letter. The subsequent positive worth puts the shadow 4px underneath the letter. Then, we have the variety! The following shadow is - 8px 8px #f48fb1 which counterbalances the shadow by 4 extra pixels toward every path.

 

Another technique is to make each letter an alternate tone. For this one, there's a trick: you want to make each letter into its own HTML component. For this situation, I utilized a range. I then utilized the:nth-kid selector to apply various varieties to each range.

For my portfolio site, I have 10 tones I pivot through - - so I use products of 10. :nth-child(10n). I then need to add an offset to everything except the primary tone - -:nth-child(10n + 2) for instance. This will in any case apply the variety to each tenth component, however beginning at the second component rather than the first. This makes it so the second, twelfth, 22nd, etc characters have that tone applied.

I would ponder openness while utilizing this strategy - - screen perusers will peruse each letter as a letter as opposed to assembling them to shape a word. Thus, you might need to conceal the rainbow letters to the screen peruser and afterward have one more header on the page that is concealed for clients perusing the page

The third method is to create a CSS gradient