Colorful Rainbow Text Generator
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, 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.
How to use this Rainbow Text Generator tool, follow these steps
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
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.
Choose coloring method: You have the option to coloring method each letter in your text paragraph individually or color each word separately.
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.
Change color brightness: You can customize the brightness of the text color to light and dark
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
Set style: Modify text font size, adjust letter spacing style in real time, add or remove shadow effect and text stroke (outline text effect).
Generate the Code: Click generate button and copy and paste the generated code onto your website
Used Google Font name: Nosifer
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
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.
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% {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.
<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(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;
}
};