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>

.rainbowheaddisplay: blockmargin:autobackground: 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 

And that's it! Isn't it pretty?


The following information was created for use with templates made with Squarespace 7.0.
Stay tuned for more tips and tricks for the new 7.1 platform!


 

need even more help with squarespace?

Skip the overwhelm and have your website
designed and launched in just 5 days!

LEARN MORE
Previous
Previous

Creating a Style Guide for Your Website

Next
Next

What works (and what doesn't) on an effective website