How to Create Apple’s Liquid Glass in Squarespace (Easy Version)

Описание: Apple’s new Liquid Glass effect might be flashy and full of animations—but what if you could capture that same modern, blurred-glass aesthetic on your own Squarespace site, using just a few lines of CSS? In this tutorial, I’ll show you exactly how to create that dreamy, glass-like design for content blocks, list sections, and dropdown folders—no animations required.

In this step-by-step video, you’ll learn how to add a sleek, semi-transparent background with a subtle blur effect to any section of your Squarespace website. You’ll also discover how to target specific blocks using a free Chrome extension, and make this visual style entirely your own. Whether you're customizing your homepage hero or styling a dropdown menu, this tutorial has you covered.

Important Time Stamps:
0:00 – What is the Liquid Glass Effect?
0:28 – When to use this design (and what it’s not)
1:10 – Adding CSS to content blocks
1:50 – Customizing the blur, padding & borders
3:20 – Styling accordion blocks and understanding padding
3:46 – Creating the effect for list sections (People section)
4:45 – Dropdown folder Liquid Glass styling
5:35 – Targeting specific blocks with a Chrome extension
6:20 – Tips for IDs vs. selectors in Squarespace
6:45 – Where to find all the codes used

📝 Original blog post with codes: https://insidethesquare.co/squarespac...

#️⃣ Free block id Chrome extension: https://insidethesquare.co/chromeext

🤖 Custom Codey, My Squarespace Code AI: https://customcodey.com

🙋‍♀️ Have a Squarespace question? Drop it in the comments below! I love hearing from you and helping you make your website uniquely yours! ✨
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ The term Liquid Glass is a reference to a software update from Apple. This video was not approved or endorsed by Apple Inc. Learn more about liquid glass here: https://www.apple.com/newsroom/2025/0...

#SquarespaceDesign #LiquidGlassEffect #CSSforSquarespace #SquarespaceTutorial #CustomCSS #Glassmorphism #WebsiteDesignTips #BlurEffectCSS #InsideTheSquare #ModernWebDesign #LiquidGlass #Squarespace #SquarespaceTutorial