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

Pin this post to Pinterest! ☝🏻

---

BLURRED GLASS EFFECT FOR TEXT BOX BACKGROUNDS

A very popular effect in design right now is “glassmorphism.” In simple terms, it gives text backgrounds a blurred, frosted glass look, so a soft blur of your background shows through.

It works really well on hero sections, call-to-action banners, and anywhere you have text sitting on top of an image.

In this tutorial, I’ll walk you through creating the effect from scratch using CSS. It’s a great one to try even if you’re new to coding, and if you want to understand what the code is actually doing, my beginner’s guide to CSS is a good place to start.

This tutorial works on Squarespace 7.1, and it looks great on mobile too.

BLURRED 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! Pair it with one of my favorite font pairings and your text will look even better sitting on top of that glass.

Adding the BLURRED 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. If you’d rather not use a photo, a gradient background works too, and the glass effect looks especially good over a parallax image as it scrolls behind the text.

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 -> Custom Code -> 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 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 how see-through it is; a higher number makes the shape more solid and shows 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

The glass effect is an easy way to make text over images easier to read and give your site a more custom look. Once you’ve got it working, browse my favorite CSS snippets for more ways to customize your Squarespace site.

And if you’d rather have someone else handle the code, let’s talk.

*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.

---