Add a Stunning Glass Effect to Your Squarespace Site with Simple CSS

Pin this post to Pinterest! ☝🏻

---

GLASS EFFECT FOR TEXT BOX BACKGROUNDS

A very popular effect in design trend world is the “glassmorphism” effect. In simple terms, it’s a technique that gives text backgrounds a frosted glass look, letting a subtle blur of your background show through.

This sleek design effect, known for its frosted glass look, works beautifully on web pages, hero sections, call-to-action banners, and text overlays.

In this tutorial, I’ll walk you through creating the effect from scratch using CSS—perfect even if you’re new to coding!

This tutorial works on Squarespace 7.0 and 7.1, and also looks great on mobile devices.

GLASS EFFECT VS DECREASED OPACITY

You may be wondering, “What’s the difference in the glass effect vs just decreasing the opacity”?

Good question.

While it’s true you can adjust the opacity in Squarespace without any code (double click the shape, click the color, and adjust the slider), it doesn’t pack the same punch as the glass effect.

For starters, sometimes text is hard to read when there’s an image behind it. And while you could increase the opacity of the shape so that you can read the text, that comes at the expense of not being able to see the background image.

The glass effect blurs the background just enough so that you can still read the text above it.

Plus, it’s just a really cool look that looks like a professional designed your site!

Adding the Glass Effect with CSS Code

Step 1: insert the image for your background

You can either use a background image or an image block and place it behind your text; either will work for this. The mountain image above is from Unsplash.

Step 2: CREATE A TEXT BLOCK AND SHAPE BLOCK

Add a text block to enter your text, then add a shape block behind it. The color doesn’t matter - we will adjust that with code.

NOTE: This CSS will only work if you use the rectangle shape block. If you use a different shape, then you will need to update the “.sqs-shape.sqs-shape-rectangle” part of the code (or leave a comment below and I will give you the updated code).

Step 3: APPLY THE CSS

Copy the code below, then go to Website -> System Tools -> Custom CSS and paste the code below in that section -

#block-yui_3_17_2_1_1727719481216_3442 .sqs-shape.sqs-shape-rectangle {
 background: rgba(254, 107, 65, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}

Step 4: CUSTOMIZE TO YOUR WEBSITE

There’s one thing you must change before you will see it work on your site.

You need to replace the block ID in the code with the block ID that pertains to your website. Every text block, image block, video block, etc has its own ID. By inserting the block ID in the code, then the code knows exactly which block on your Squarespace website to apply the effect to.

Use the the Squarespace ID Finder extension (it's free!) to get the block ID of the SHAPE block (NOT the text block).

Click the ID to copy it, then replace #block-yui_3_17_2_1_1727719481216_3442 with your own. Be sure you still have .sqs-shape.sqs-shape-rectangle { after it in the code.

Step 5: OTHER OPTIONS TO CUSTOMIZE

Right now your shape block behind the text should be blurry. Yea!

Here are a few additional ways you can customize it:

• background: rgba(254, 107, 65, 0.1); - Change the first three numbers to change the color of the shape. You can only use RGB colors. Use this to convert Hex codes to RGB. Adjust the .1 to change the opacity; a higher number will lessen the opacity and show more of the actual color.

• backdrop-filter: blur(10px); - Change the number to adjust the blur. A higher number will create more of a blur.

• box-shadow: 0 0 80px rgba(0, 0, 0, 0.1); - There is a subtle shadow behind the shape. Change 80px to adjust the amount of blur. You can also change the RGB number if you want the shadow a different color, and changing the .1 will adjust the opacity.

• border-radius: 50px; - This number adjusts the curve in the corners of the rectangle. If you want it to be perfectly square, change the number to 0px.

TROUBLESHOOTING

If your code isn’t quite working, check these things:

• Is every single character in the code above also in your code?? If just one character is missing, it can cause it to break. This usually happens when people replace the block ID.

• Did you change the block ID in the code to the block ID for your block?

• If so, did you use the shape block ID or the text block? (It should be the shape block)

Final Thoughts

Using the glass effect is a subtle but powerful way to add sophistication to your Squarespace site. Whether you’re a beginner or more advanced in web design, adding this frosted glass effect is a fun way to experiment with CSS and make your website pop.

Give it a try and show off your glass effect in the comments below!

*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.

---