Highlighted text with Animated Gradient

Use the code below to easily highlight text with a gradient effect. By using Paragraph 1 italicized, the code will automatically update with the selected styling.

Active Example of the effect with custom colors.

This is cool (P1 italicized)

SO AWESOME (H2)

---

how to use the code:

Step 1: Copy code below

Then Head to Design > Custom CSS and inject the code. This code works on all 7.1 templates.

// Mini Text - highlight gradient //
.sqsrte-large em {
  font-size: 16px;
  font-family: neuzeit-grotesk;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #fff!important;
  text-transform: uppercase;
  font-style:  !important;
  padding: 6px 16px !important;
  border-radius: 0px 0px 0px 0px !important;
background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;}

// Animation Keyframes //
@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}
// Mini Text - highlight gradient //

---

Quick Tips

To enable the highlight gradient effect, set the Paragraph 1 text to italic. This will activate the styling.

You can customize the coding to fit your site by using the quick tips below.

How to customize the settings

font-size: 16px; (Text size)

font-family: futura-pt; (Font Style)

letter-spacing: 0.05em; (Spacing of Letters)

font-weight: 500; (Font Weights)

color: #fff!important; (Text Color)

text-transform: uppercase; (Text Styling, use lowercase, capitalize, or uppercase)

font-style: normal !important; (change to italized if you’d like it italic)

padding: 6px 16px !important; (Box Padding)

border-radius: 0px 0px 0px 0px !important; (Pill shape change code to - border-radius: 10px;)

How to change the gradient styling

Gradient color section:

background: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63);

Replace the 4 hex code #’s with the color codes of your choice. For gradient ideas, visit uiGradients for color combinations and patterns.

Bonus

You can change .sqsrte-large em to affect the text styling you like. em is code for italic.

• h1 em (header 1 italicized)

• h2 em (header 2 italicized)

• h3 em (header 3 italicized)

• h4 em (header 4 italized)

• .sqsrte-large em (paragraph 1 italized)

• p em (WARNING: using p em will affect every paragraph styling)

• .sqsrte-small em (paragraph 3 italized)

That’s it!

Reach out in the comments if you have any questions.

---

Disclaimer: Nestingzone is not affiliated or endorsed by Squarespace, we just love their platform. The term "Squarespace" is the registered trademark and property of Squarespace, inc.