Gradient Header Font

Screen Shot 2019-05-23 at 3.55.12 PM.png

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Gradient Text //

h1 {
background: #36D1DC; // default color for older browsers
background: linear-gradient(45deg, #5b86e5, #36d1dc 50%); // angle, color1, color2, gradient position for chrome
background: -webkit-linear-gradient(45deg, #5b86e5, #36d1dc 50%);  // angle, color1, color2, gradient position for safari
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}

Step Three

Change the “h1” value to the header you’d like to target - this can either be h2 or h3.

Replace both sets of the #5b86e5 and #36d1dc values with the color codes of your choice.

Save and refresh the page. 👍

Moov Labs