How to Easily Add a Gradient Line to Your Squarespace Website

Are you looking to enhance the visual appeal of your Squarespace website? Adding a gradient line can be a simple yet effective way to divide sections and add a touch of style. In this tutorial, I'll guide you through the straightforward process of incorporating a gradient line into your Squarespace site.

Watch the Video

Check out the YouTube video below 👇

Step 1: Adding the Line Block

To begin, navigate to the section of your Squarespace website where you want to insert the gradient line. Click to add a new content block and select the "Line" option. You can adjust the size and placement of the line according to your preferences.

Step 2: Adding the Gradient Code

Next, we'll need to add custom CSS code to create the gradient effect. Copy the provided code from the description below the video and navigate to the Custom CSS editor in your Squarespace dashboard. Paste the code into the editor and save your changes.

.sqs-block-horizontalrule hr {

background: linear-gradient(to right ,#4E68EA,#a33a3d,#4E68EA);

}

Step 3: Customizing the Gradient

Once the code is applied, you'll notice that the line now features a gradient effect. You can customize this gradient to match your website's color scheme and design preferences. Simply adjust the color values in the CSS code to achieve the desired look. For example, changing the gradient from black to white or experimenting with different hues.

Step 4: Adjusting the Gradient Direction

By default, the gradient may flow from left to right. If you prefer a different direction, such as right to left, you can easily modify the code accordingly. Simply update the CSS property to specify the desired direction (e.g., changing "to right" to "to left").

Adding a gradient line to your Squarespace website is a quick and effective way to elevate its visual appeal. Whether you're dividing sections or simply adding a stylish touch, this tutorial offers a straightforward method for incorporating gradients into your site design. Experiment with different colors and directions to find the perfect gradient line for your website. Try it out today and enhance the aesthetic appeal of your Squarespace site!

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call