(Squarespace) How to add a gradient on a text block

[tuanphan]

To add a gradient on a text block, you can follow these.

#1. Specific Text Block

First, find ID of Text Block.
In my example, we will have: #block-yui_3_17_2_1_1739950653718_1742

Next, use CSS code like this. (You can change color in the code)
If code doesn’t work, you can comment below, message or send me an email.

#block-yui_3_17_2_1_1739950653718_1742 
{
    background-image: linear-gradient(to right, red , yellow);
    padding: 5px 10px;
}

#2. Multiple Text Block with Same Gradient

Instead of having to find the ID of multiple Blocks. You can do the following.

First, add ## symbol at bottom of text.

Highlight ## > Click Link icon > and enter URL: #gradient

Next, use this code to Custom CSS box.

/* Gradient text */
:root {
    --gradient1: red;
    --gradient2: yellow;
}
div.html-block:has(a[href="#gradient"]) {
 & {
    background-image: linear-gradient(to right, var(--gradient1), var(--gradient2));
    padding: 5px 10px;
}
  a[href="#gradient"] {
    display: none;
  }
}

Remember to change color

Result