Colorful Rainbow Text Generator
Contents
To create Colorful rainbow text online, you can utilize this tool that generates HTML and CSS rainbow colored text.
Let's look at a few examples rainbow colored text
This tool can create text in different colors! You can make VIBGYOR color format text, random color text, rainbow colors 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.
How To Do Each Text Different Color
This tool helps you separate each letter and give them unique colors.
Create Rainbow Text
Add your text here
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.
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.
Generated HTML CSS code copy and paste it your website.
How to use this Rainbow Text Generator tool, follow these steps
- Enter Text: Type or paste your text.
- Choose Color Group: Select from VIBGYOR, random colors, or custom colors.
- Choose Coloring Method: Color each letter or word separately.
- Select Gradient: Apply gradient to each line, word, or letter.
- Adjust Brightness: Customize text brightness.
- Preview and Adjust: Use "Update Text" for new random colors.
- Set Style: Modify font size, spacing, shadow, or text stroke.
- Generate Code: Click "Generate" and copy the code for 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
CSS Rainbow Colors Text
Use CSS Linear Gradient to make a text with rainbow colors.
.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);
-webkit-text-fill-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 Rainbow Gradient Colorful Text
CSS text background with a linear gradient creates a colorful rainbow effect. The colors smoothly transition from left to right.
.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;
-webkit-text-fill-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-2 {
font-size: 42px;
font-family: Arial Black, Gadget, sans-serif;
animation: rainbow-color-change 3s linear infinite alternate;
}
@keyframes rainbow-color-change {
0%, 100% { color: #ff0000; } /* Red */
14% { color: #ff8b00; } /* Orange */
28% { color: #e8ff00; } /* Yellow */
42% { color: #5dff00; } /* Green */
56% { color: #00b9ff; } /* Blue */
70% { color: #5d00ff; } /* Indigo */
84% { color: #e800ff; } /* Violet */
}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.
<div id="js-rainbow-1">JavaScript Rainbow Text 1</div>
<div id="js-rainbow-2">JavaScript Rainbow Text 2</div>#js-rainbow-1, #js-rainbow-2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 50px;
}class RainbowText {
constructor(elements, saturation = 100, lightness = 50) {
// Ensure saturation is between 20 and 100, and lightness between 20 and 99
this.saturation = this.clamp(saturation, 20, 100);
this.lightness = this.clamp(lightness, 20, 99);
// script - https://www.html-code-generator.com/html/rainbow-text-generator
// Convert NodeList to array or wrap a single element into an array
const elementArray = elements instanceof NodeList ? Array.from(elements) : [elements];
// Apply the rainbow color effect to each element
elementArray.forEach(element => this.applyColor(element));
}
// Ensure that a value stays within the min and max range
clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
// Apply color to the text of a given DOM element
applyColor(element) {
// Ensure element is valid and has text content
if (!element || typeof element.innerText !== 'string') {
console.warn('Invalid element provided to RainbowText');
return;
}
const text = element.innerText;
// If the element contains less than 2 characters, skip processing
if (text.length < 2) return;
// Map each character to a colored <span> based on its position
const coloredSpans = text.split('').map((char, index) => {
const hue = Math.round((360 * index) / text.length);
const color = `hsl(${hue}, ${this.saturation}%, ${this.lightness}%)`;
return `<span style="color: ${color}">${char}</span>`;
});
// Replace the original text with the colored <span> elements
element.innerHTML = coloredSpans.join('');
}
}