Gradient Header Font

Look Demo

Add an eye catching gradient color to any header text. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. 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;
}

Customize

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.

License

This plugin comes with an Unlimited Use License. View License Terms