[SOLVED] how to create rainbow text in html alone | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

[SOLVED] how to create rainbow text in html alone

13th Aug 2020, 11:53 PM
GOLDEN STAR
GOLDEN STAR - avatar
10 Answers
17th Mar 2021, 9:05 PM
Jonny Legend
+ 4
<p style="background-image: repeating-linear-gradient(45deg, orange , yellow, green, cyan, blue, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent; ">Rain</p> https://code.sololearn.com/WpWbTMzENToT/?ref=app
14th Aug 2020, 1:08 AM
Calviղ
Calviղ - avatar
+ 2
Something like this? <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <span style="color:#f00">R</span> <span style="color:#f50">a</span> <span style="color:#ff0">i</span> <span style="color:#5f0">n</span> </body> </html>
14th Aug 2020, 12:08 AM
Steven M
Steven M - avatar
+ 2
Calviղ I like what you did, I took it a little further 👍😁👍 https://code.sololearn.com/WT9206k33a6L/?ref=app
14th Aug 2020, 1:45 AM
Steven M
Steven M - avatar
+ 1
kinda but I want the color to change forever betwen all of the colors of the rainbow
14th Aug 2020, 12:15 AM
GOLDEN STAR
GOLDEN STAR - avatar
+ 1
const rainbowColors = ["red", "yellow", "pink", "etc"]; const timeToChange = setInterval(change, 1000); function changeColor(timeToChange) => { for (let i = 0; i < rainbowColors.length; i++) { document.getElementByClassName("rainbowLetter").style.color = rainbowColors[i]; } } // HTML each <span> would have a class or just use getElementByTagName('span') if those are the only spans, but usually they aren't. // Something along those lines? // edit: I'm using my phone right now, if that's what you're looking for I'll actually code it out when I'm at my laptop
14th Aug 2020, 11:27 AM
Jonny Legend
+ 1
okay please code it
14th Aug 2020, 4:40 PM
GOLDEN STAR
GOLDEN STAR - avatar
+ 1
you have to use css as style in html code
15th Aug 2020, 5:09 AM
Mohammed Kifah Jumaah
Mohammed Kifah Jumaah - avatar
+ 1
Oh wow, sorry about that! I haven't been on here in a while... This video will show you exactly how to accomplish what you need. https://youtu.be/rf7eOG0og3s
16th Dec 2020, 4:42 PM
Jonny Legend
+ 1
thx
16th Dec 2020, 5:47 PM
GOLDEN STAR
GOLDEN STAR - avatar