Rainbow Colors Text Generator HTML CSS

How to create online rainbow text. here is the tool 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.

Demo Rainbow Text:
Demo
1

Enter your text

12 /1000
Words Separating
Rainbow
words words words
മലയാളം हिंदी 中文 বাংলা
2

Choose a color scheme

Adjust the color brightness

saturation
lightness
Font Family:
Font Style:
Loading Google Font
Font Size:
Text Shadow:
Text Stroke:

Text convert to image

You can convert this rainbow text to image format. And You can download it as an image PNG with transparent background-color

Width: 0px
Height: 0px
Size: 0KB
Download image
Generate code Reset
Google Font Link
CSS
HTML
Preview Code Edit Code Download Code

CSS Animated rainbow

Animated Rainbow
Edit Codeview Code
Animated Rainbow
Edit Codeview Code
Animated Rainbow
Edit Codeview Code

CSS linear gradient rainbow

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

JavaScript Rainbow Text

JavaScript Rainbow Text
HTML
<div id="js-rainbow-1">JavaScript Rainbow Text 1</div>
<div id="js-rainbow-2">JavaScript Rainbow Text 2</div>
HTML
#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);
Edit Code
Report Problem