Create a Color Gradient for a Line Block in Squarespace
Looking to add a little drama to your Squarespace website?
in this blog post, I'm going to show you how to create this really cool gradient effect for a horizontal line block in Squarespace using custom CSS.
Turn that ordinary line block into an eye-catching dividing element that looks something like this (but yours will be way cooler):
Follow These Easy Steps to Create a Color Gradient for Your Line Block in Squarespace
In edit, add a line block, position it wherever you like it, and save
In your pages panel, scroll down to website tools > Custom CSS
Copy the code below and paste it into Custom CSS
Change the hex codes to whatever colors you like
/* Add a color gradient to a line block */
hr {
background: linear-gradient(to
right,#BD005B,#E55937,#FFE974);
}
Change the Direction of the Gradient
See where the code snippet says “to right?” If I wanted to reverse the direction, simply change the wording to read, “to left.”
Play Around With the Colors
Try using the same hex code on the ends and a different one in the middle.
And you can even add more colors to this if you want. Simply add a comma after the last hex code and add an additional hex code.
Isolate a Line Block
The code snippet is going to target every line block on your Squarespace website. If you want to isolate one particular line block, you'll need the Squarespace block identifier Chrome extension, which you can get here.
Select the block identifier from your Chrome browser—all the section IDs and block IDs on your webpage will be displayed
Locate the block ID that represents the block you're trying to target and select it—it automatically copies it to the clipboard
Go back to the code and right before the “hr,” paste that block ID and then add a space
Save
Click on the block identifier again to get rid of all that messiness
If you want to target more than one line block, but not all of the lines on your Squarespace website:
Select the block identifier from your Chrome browser
Locate and select the block ID of the line you want to target
Go back over to your code snippet and after the “hr” add a comma and paste the block ID, ad a space, then type “hr”
Save
Was this helpful?
Are you going to try this? What will you use it for? Tell me about it in the comments. 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
