Report Blog Entry
This is the Rainbow Underline
This is the Rainbow Text
This is the Rainbow Pan
This is the Rainbow Flash
This is the Rainbow Flash Shadow
This is the Rainbow Blink
This is the Rainbow Blink Pan
How to use each property:
<p class="rainbowUnderline inline">This is the Rainbow Underline</p>
<p class="rainbow inline">This is the Rainbow Text</p>
<p class="rainbowPan inline">This is the Rainbow Pan</p>
<p class="rainbowFlash inline">This is the Rainbow Flash</p>
<p class="rainbowFlashShadow inline">This is the Rainbow Flash Shadow</p>
<p class="rainbowBlink inline">This is the Rainbow Blink</p>
<p class="rainbowBlinkPan inline">This is the Rainbow Blink Pan</p>
CSS:
.rainbowUnderline{text-decoration:none;background-position:0 1.10em;background-size:100% 100%;background-repeat:no-repeat;transition:background 0.5s;background-image:linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959)}.rainbow{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rainbowPan{animation:myRainbowPan 1s infinite}.rainbowFlash{animation:myRainbow 2s linear infinite}.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}.rainbowBlink{animation:myRainbowBlink 0.3s infinite}.rainbowBlinkPan{animation:myRainbowBlinkPan 2s infinite}@keyframes myRainbowPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbow{0%{color:#e1f549}25%{color:#29d0be}50%{color:#6cb8ea}75%{color:#ff5959}100%{color:#e1f549}}@keyframes myRainbowShadow{0%{text-shadow:0 0 5px #e1f549}25%{text-shadow:0 0 5px #29d0be}50%{text-shadow:0 0 5px #6cb8ea}75%{text-shadow:0 0 5px #ff5959}100%{text-shadow:0 0 5px #e1f549}}@keyframes myRainbowBlink{0%{color:inherit}50%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbowBlinkPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}12.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}37.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}62.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}87.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.inline{display:inline}
Just add the CSS to the inside of a style tag and then you're good to go!
To use it you just add class="[class name here]" to any text tag with any of the following classes: rainbow, rainbowUnderline, rainbowPan, rainbowFlash, rainbowFlashShadow, rainbowBlink, rainbowBlinkPan.
Take a look at the examples to get an idea of how this should look for each property. Note that this CSS does include the .inline selector which simply sets your text to be placed inline with any other text. This is an optional property and not necessary, but does have its uses to get the full effect of certain rainbow classes.
P.S. If you are trying to use the rainbowUnderline effect but you do not see your underline then that means you'll need to adjust one small property. Find the .rainbowUnderline selector in the CSS. You'll see the property background-position: 0 1.15em. Change the second value to a number smaller than 1.15 until you're able to see it to a size of your liking. Remember, the smaller the number, the larger the line, just make sure you keep the "em" value type.
Edit 12/16/2021: A comment on this post gave me the idea to make the rainbow itself customizable. I didn't want to alter the original CSS because I do like how that rainbow looked, but I do want to give you the opportunity to easily pick how your own rainbow looks without fussing with all the code. So, here it is.
To customize this code all you need to do is change the hex codes at the very top in the ":root" element and make sure the entire thing is tucked inside your profile's style tags. You don't need to do anything else to the rest of the CSS, it'll just work! With this you can make the colors whatever you'd like them to be!
:root {
--color1: #e1f549;
--color2: #29d0be;
--color3: #6cb8ea;
--color4: #ff5959;
}
.rainbowUnderline{text-decoration:none;background-position:0 1.1em;background-size:100% 100%;background-repeat:no-repeat;transition:background .5s;background-image:linear-gradient(110deg,var(--color1),var(--color2),var(--color3),var(--color4))}.rainbow{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rainbowPan{animation:myRainbowPan 1s infinite}.rainbowFlash{animation:myRainbow 2s linear infinite}.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}.rainbowBlink{animation:myRainbowBlink .3s infinite}.rainbowBlinkPan{animation:myRainbowBlinkPan 2s infinite}@keyframes myRainbowPan{0%{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}25%{background:-webkit-linear-gradient(45deg,var(--color2),var(--color3),var(--color4),var(--color1));-webkit-background-clip:text;-webkit-text-fill-color:transparent}50%{background:-webkit-linear-gradient(45deg,var(--color3),var(--color4),var(--color1),var(--color2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}75%{background:-webkit-linear-gradient(45deg,var(--color4),var(--color1),var(--color2),var(--color3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}100%{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbow{0%{color:var(--color1)}25%{color:var(--color2)}50%{color:var(--color3)}75%{color:var(--color4)}100%{color:var(--color1)}}@keyframes myRainbowShadow{0%{text-shadow:0 0 5px var(--color1)}25%{text-shadow:0 0 5px var(--color2)}50%{text-shadow:0 0 5px var(--color3)}75%{text-shadow:0 0 5px var(--color4)}100%{text-shadow:0 0 5px var(--color1)}}@keyframes myRainbowBlink{0%{color:inherit}50%{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbowBlinkPan{0%{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}12.5%{background:0 0;-webkit-background-clip:none;-webkit-text-fill-color:inherit}25%{background:-webkit-linear-gradient(45deg,var(--color2),var(--color3),var(--color4),var(--color1));-webkit-background-clip:text;-webkit-text-fill-color:transparent}37.5%{background:0 0;-webkit-background-clip:none;-webkit-text-fill-color:inherit}50%{background:-webkit-linear-gradient(45deg,var(--color3),var(--color4),var(--color1),var(--color2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}62.5%{background:0 0;-webkit-background-clip:none;-webkit-text-fill-color:inherit}75%{background:-webkit-linear-gradient(45deg,var(--color4),var(--color1),var(--color2),var(--color3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}87.5%{background:0 0;-webkit-background-clip:none;-webkit-text-fill-color:inherit}100%{background:-webkit-linear-gradient(45deg,var(--color1),var(--color2),var(--color3),var(--color4));-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.inline{display:inline}
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
Specter
Hello! Is it possible to do this for headers? If so, how? Thanks!
Actually yes there is! It's a bit of a different process, but it is totally possible!
So once you've added in the CSS for the rainbow test (which I see you've already got on your page, nice!) add this somewhere:
h4 { animation:myRainbowPan 1s infinite; }You can change where it says myRainbowPan to any of the other styles I've premade and listed in this blog post.
by Tommy Panzram; ; Report
5ativa vampir3
remember looking for rainbow text MONTHS ago n i couldn't find any working html. God bless you two lol saving the day
tigerkingforme
i edited this code to get a more vibrant rainbow, as this pallete is kinda pastel.
[CODE]
.rainbowUnderline{text-decoration:none;background-position:0 1.10em;background-size:100% 100%;background-repeat:no-repeat;transition:background 0.5s;background-image:linear-gradient(110deg, #FFFF00, #00FFFF, #0000FF, #FF0000)}.rainbow{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rainbowPan{animation:myRainbowPan 1s infinite}.rainbowFlash{animation:myRainbow 2s linear infinite}.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}.rainbowBlink{animation:myRainbowBlink 0.3s infinite}.rainbowBlinkPan{animation:myRainbowBlinkPan 2s infinite}@keyframes myRainbowPan{0%{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}25%{background:-webkit-linear-gradient(45deg, #00FFFF, #0000FF, #FF0000, #FFFF00);-webkit-background-clip:text;-webkit-text-fill-color:transparent}50%{background:-webkit-linear-gradient(45deg, #0000FF, #FF0000, #FFFF00, #00FFFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}75%{background:-webkit-linear-gradient(45deg, #FF0000, #FFFF00, #00FFFF, #0000FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}100%{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbow{0%{color:#FFFF00}25%{color:#29d0be}50%{color:#0000FF}75%{color:#FF0000}100%{color:#FFFF00}}@keyframes myRainbowShadow{0%{text-shadow:0 0 5px #FFFF00}25%{text-shadow:0 0 5px #29d0be}50%{text-shadow:0 0 5px #6cb8ea}75%{text-shadow:0 0 5px #FF0000}100%{text-shadow:0 0 5px #FFFF00}}@keyframes myRainbowBlink{0%{color:inherit}50%{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbowBlinkPan{0%{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}12.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}25%{background:-webkit-linear-gradient(45deg, #00FFFF, #0000FF, #FF0000, #FFFF00);-webkit-background-clip:text;-webkit-text-fill-color:transparent}37.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}50%{background:-webkit-linear-gradient(45deg, #0000FF, #FF0000, #FFFF00, #00FFFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}62.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}75%{background:-webkit-linear-gradient(45deg, #FF0000, #FFFF00, #00FFFF, #0000FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}87.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}100%{background:-webkit-linear-gradient(45deg, #FFFF00, #00FFFF, #0000FF, #FF0000);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.inline{display:inline}
This just gave me an idea....Check the edit!
by Tommy Panzram; ; Report
Ah, this is great! Thank you!
by tigerkingforme; ; Report