HOW TO CREATE A RAINBOW TEXT EFFECT ON YOUR WEBSITE

 

Sometimes it's fun to just add a random, pretty effect to your website, just because. Because who doesn't like rainbows? And since the answer to that is "No one!", why not add some rainbows to your website?

Let's do it.
 

How to create a rainbow text effect on your website:

  1. First, add a CODE content block to your page.
  2. Then add this snippet of code and change YOUR TEXT GOES HERE to whatever you'd like your text to say:

<style>

.rainbowhead {
  display: block;
  margin:auto;
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
  </style>
<body>

    <h1 class="rainbowhead">YOUR TEXT GOES HERE</span></h1>

</body>

 

And that's it! You should now have rainbow text effect on your Heading 1 text! You can change this to any heading or font size you need by changing the "h1" to match the following:

<h1> = Heading 1
<h2> = Heading 2
<h3> = Heading 3
<p> = Normal 

YAY!


 

Related Posts

NEED EVEN MORE HELP WITH SQUARESPACE?

Skip the overwhelm and have your website designed and launched in just 5 days (or less)!

LEARN MORE