10 CSS Tricks to Make Your Squarespace Site Stand Out

Every Squarespace site uses the same templates. These 10 copy-paste CSS tricks help yours look different. Each one goes in your Custom CSS panel (Design → Custom CSS) unless noted otherwise.

1. Gradient Text on Headings

Gradient text catches the eye without being overbearing. It works on any heading and looks especially good on large hero text.

h1 {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Result: Your H1 headings display a smooth purple-to-blue gradient instead of a solid color. Change the hex values to match your brand colors.

2. Smooth Hover Effects on Buttons

The default Squarespace button hover is abrupt. This adds a smooth color transition and a slight lift effect.

.sqs-block-button-element {
  transition: all 0.3s ease;
}

.sqs-block-button-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

Result: Buttons gently float upward and gain a soft shadow when hovered. The transition makes it feel polished and intentional.

3. Custom Scrollbar Styling

A subtle branded scrollbar adds a layer of polish that most visitors notice subconsciously. This works in Chrome, Edge, and Safari.

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Result:The browser scrollbar becomes a slim, rounded bar that matches your site's design instead of the bulky default. Firefox users will see the default scrollbar.

4. Parallax Background Sections

Parallax makes background images appear to move slower than the foreground as visitors scroll, creating a sense of depth.

/* Target a specific section by its data attribute or class */
.page-section:nth-child(2) .section-background img {
  position: fixed !important;
}

For a more controlled approach that works across all browsers, use the CSS-only method on a section with a background image:

.page-section:nth-child(3) {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

Result: The background image of that section stays in place while the content scrolls over it, creating a cinematic depth effect.

5. Animated Underlines on Links

Replace the default underline with a smooth animation that draws the underline from left to right on hover.

.sqs-block-html a {
  text-decoration: none;
  position: relative;
}

.sqs-block-html a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.sqs-block-html a:hover::after {
  width: 100%;
}

Result: Links in your text blocks show no underline by default. On hover, a thin line animates in from the left edge to the right. It feels modern and clean.

6. Card Hover Lift with Shadow

Make blog post cards, portfolio items, or any grid items lift off the page on hover. This works well with Squarespace's summary blocks and grid sections.

.summary-item, .grid-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-item:hover, .grid-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

Result: Cards lift upward and gain a natural-looking shadow, giving the impression that they are floating above the page. This adds a layer of interactivity that makes the site feel premium.

7. Custom Selection / Highlight Color

When visitors highlight text on your site, the default blue selection color shows. You can change it to match your brand.

::selection {
  background: #764ba2;
  color: #ffffff;
}

::-moz-selection {
  background: #764ba2;
  color: #ffffff;
}

Result: Selected text shows your brand color as the highlight instead of the default blue. A small detail that designers notice and appreciate.

8. Fade-In on Scroll

Make elements fade in as visitors scroll down the page. This requires a small piece of JavaScript alongside the CSS. Add the CSS to Custom CSS and the JavaScript to Code Injection (Footer).

CSS (goes in Custom CSS):

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript (goes in Code Injection → Footer):

<script>
document.addEventListener('DOMContentLoaded', function() {
  var sections = document.querySelectorAll('.page-section');
  sections.forEach(function(el) {
    el.classList.add('fade-in');
  });

  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.fade-in').forEach(function(el) {
    observer.observe(el);
  });
});
</script>

Result: Each section of your page fades in smoothly as it enters the viewport. This creates a storytelling feel as visitors scroll through your content.

9. Sticky Navigation That Shrinks

By default, Squarespace 7.1 headers can be set to fixed. This CSS adds a shrinking effect so the header takes up less space after you scroll past the hero.

CSS (Custom CSS):

.header {
  transition: padding 0.3s ease;
}

.header--menu-open .header,
.shrink-header .header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

JavaScript (Code Injection → Footer):

<script>
window.addEventListener('scroll', function() {
  var header = document.querySelector('header');
  if (window.scrollY > 100) {
    document.body.classList.add('shrink-header');
  } else {
    document.body.classList.remove('shrink-header');
  }
});
</script>

Result: The header starts at its normal size and smoothly shrinks after you scroll 100 pixels. This gives more screen space to your content while keeping the navigation accessible.

10. Dark Mode with One CSS Class

You can create a dark mode for your entire site with CSS custom properties. This sets up the foundation — pair it with a toggle button if you want visitors to switch.

/* Default (light mode) colors are already in your template */

/* Dark mode override */
body.dark-mode {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

body.dark-mode .header {
  background-color: #16213e !important;
}

body.dark-mode .page-section {
  background-color: #1a1a2e !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: #ffffff !important;
}

body.dark-mode .footer-block {
  background-color: #0f3460 !important;
}

To toggle it, add this JavaScript to Code Injection (Footer):

<script>
// Check for saved preference
if (localStorage.getItem('darkMode') === 'true') {
  document.body.classList.add('dark-mode');
}

// Toggle function — hook this up to a button
function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
  localStorage.setItem('darkMode',
    document.body.classList.contains('dark-mode'));
}
</script>

Result: Adding the dark-modeclass to the body flips your entire site to dark colors. The JavaScript remembers the visitor's preference using localStorage so it persists across page loads.

Related Tools