How to Use Custom CSS & Code in Squarespace: Pro Designer Tips

1. Finding Block IDs with Precision

Target individual elements without affecting global styles

Every section, block, and collection on Squarespace has a unique ID (e.g., #block-yui_3_17_2...). Use browser developer tools or the free Squarespace ID Finder Chrome extension to grab exact selectors.

Always scope your CSS rules to either a specific page collection ID or block ID to prevent unintended style leaks across your store or blog.

2. Adding Frosted Glass & Custom Card Elevations

Modern Apple-inspired aesthetics with vanilla CSS

Create luxurious glassmorphism cards with subtle border strokes and backdrop filters using this production-tested snippet:

/* Looksbay Glassmorphism Card Style */
.custom-card-container {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s ease;
}

.custom-card-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 119, 237, 0.12);
}

3. Importing Custom Brand Fonts (@font-face)

Use high-end bespoke typography beyond Adobe and Google libraries

Upload your .woff2 font files directly into Website > Pages > Custom CSS > Manage Custom Files.

Then declare your font family and bind it to your desired heading or paragraph styles:

@font-face {
  font-family: 'CabinetGrotesk';
  src: url('https://static1.squarespace.com/static/.../CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

h1, h2, .gradient-heading {
  font-family: 'CabinetGrotesk', sans-serif !important;
  letter-spacing: -0.03em;
}

4. Where to Place Your Code

Custom CSS vs Code Injection vs Code Block

Custom CSS panel: strictly for styling rules. It applies site-wide and doesn't require <style> tags.

Code Injection (Header/Footer): for tracking scripts, Google Analytics tags, and custom external libraries like GSAP.

Code Block: for embedding interactive widgets, HTML forms, or custom iframes directly inside a page canvas.