How to Add a Gradient Effect to a Shape on Squarespace

Adding a gradient effect to a shape on your Squarespace website is a fantastic way to enhance the design, and add detail to what would otherwise be a very boring element within your website. I will take you through how you can do this for your site on Squarespace within this tutorial.

Watch The YouTube Video

Watch the YouTube version of this tutorial for a more visual look at this topic.

Adding A Gradient Effect To A Shape On Squarespace

Step 1: Add Your Shape

1. Make your way to your Squarespace editor.

2. Select Add Section > Add Block > Shape and select your desired shape

Step 2: Remove The Opacity

1. Select the Edit (pencil) icon.

2. Select Color and change the shape color to white.

3. Adjust the opacity to 0.

4. Select save.

This step is crucial for ensure the shapes ‘default color’ does not go on top of the gradient.

Step 3: Find The Block ID Using Squarespace ID Finder

1. Add THE Squarespace ID Finder extension to your browser.

2. Select the plugin using the puzzle icon in the top right corner to reveal the IDs on your page.

3. Simply select the block ID that will appear above your shape to copy the code.

Step 4: Apply the Gradient Using Custom CSS

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code:

css

Copy

#block-INSERT-YOUR-ID-HERE { background: linear-gradient(135deg, #1a1a1a, #005bbb); border-radius: 10px; /* Optional: Rounds the corners */ border: 1px solid rgba(255, 255, 255, 0.2); /* Optional: Light outline */ }

1. Replace INSERT-YOUR-ID-HERE with the ID you saved from earlier.

2. Select save.

Step 5: Adjust the Gradient

• Open Google Hex Colour Picker to find colours that you like.

• Replace #1a1a1a and #005bbb with your preferred hex codes.

• To modify the angle, adjust the 135deg value.

Any Questions?

My name is Jacob, your expert Squarespace designer. I have helped hundreds of businesses in multiple industries. If you have any questions after reading this article, feel free to contact me through WhatsApp.

If you’d like to discuss a potential design project, you can email me at jacobchivers@chiverscrafted.co.uk or contact me here.

Thanks for reading.