Last updated on December 15th, 2022 at 08:24 am
This is a quick tutorial to make rainbow color text using simple HTML / CSS. Here I have a text which says “HAPPY NEWYEAR 2023” . Each character of that text has a Class associated with it.
<p><big>
<span class="c1">H</span><span class="c2">A</span><span class="c3">P</span><span class="c5">P</span><span class="c6">Y</span>
<span class="c1">N</span><span class="c2">E</span><span class="c3">W</span><span class="c5">Y</span><span class="c6">E</span><span class="c2">A</span><span class="c3">R</span> <span class="c6">2</span><span class="c2">0</span><span class="c3">2</span><span class="c1">3</span></big></p>
Now going to the Style section as you can see each class is defined with a background and color. Just change those according to your requirement.
<style>
big { font-size: 400% ; line-height: 150% }
.c1 { background: white ; color: #F0F }
.c2 { background: white ; color: #00F }
.c3 { background: white ; color: #0FF }
.c4 { background: white ; color: #0F0 }
.c5 { background: white ; color: #AE6 }
.c6 { background: white ; color: #F00 }
</style>
Copy paste both HTML and CSS defined above to an HTML page and see the magic.
admin