Free code library

Squarespace snippets that are ready to paste

Tested CSS and JavaScript customizations for Squarespace 7.1, each with clear installation steps, compatibility notes, and the exact plan you need.

14 free snippetsFree for personal and client sitesUpdated August 2026

Find a Squarespace snippet

14 snippets found

Featured snippets

Start with the most useful tweaks

Popular customizations that make an immediate visual or usability difference.

Two browser views showing a travel page before and after scrolling hides the header
Navigation & Header
01
JavaScript · Business+

Hide Header on Scroll

Slides the header out of view while visitors scroll down and brings it back the moment they scroll up.

Before-and-after website views showing a button lifting and filling gold on hover
Buttons & Text Effects
02
CSS · Any plan

Button Hover Effects

Three standalone hover styles for Squarespace buttons: a lift with shadow, a color wipe, and a letter spacing expansion.

Before-and-after project cards showing the same interior image zoomed within its frame
Images & Galleries
03
CSS · Any plan

Image Hover Zoom

Applies a smooth scale-on-hover effect to image blocks and gallery items, cropped cleanly inside their frames.

Snippet library

Explore all snippets

11 more tested customizations

Before-and-after browser views comparing opaque and transparent headers over the same hero
Navigation & Header
CSS · Any plan

Transparent Header

Removes the header background and overlays the navigation on your first section, with an optional solid state on scroll.

Before-and-after website views comparing a plain and styled gold announcement bar
Navigation & Header
CSS · Any plan

Announcement Bar Styling

Restyles the default announcement bar with a gradient background, refined typography, and a subtle close button.

Before-and-after website headings comparing solid ivory text with a gold-to-ivory gradient
Buttons & Text Effects
CSS · Any plan

Gradient Text Headings

Paints H1 and H2 headings with a CSS gradient, with a solid color fallback for browsers that cannot clip backgrounds to text.

Two browser views showing a studio headline midway through typing and fully completed
Buttons & Text Effects
JavaScript · Business+

Typewriter Text Effect

Types and deletes a rotating list of words inside a heading, with a blinking caret, in plain vanilla JavaScript.

Two animation frames showing geometric partner marks moving horizontally across a website
Images & Galleries
CSS · Any plan

Scrolling Logo Marquee

An infinite scrolling strip of client logos built with HTML and CSS only: seamless loop, faded edges, no JavaScript.

Before-and-after browser views showing service cards fading into view on scroll
Animations & Effects
JavaScript · Business+

Scroll Fade-In Sections

Fades each page section up into view the first time it enters the viewport, using the IntersectionObserver API.

Two website views showing a small idle cursor expanding into an OPEN cursor over a link
Animations & Effects
JavaScript · Business+

Custom Cursor

Replaces the default cursor with a dot and a trailing ring that grows over links, disabled automatically on touch devices.

A scrolled article with a floating up button beside the same page returned to the top
Layout & Utilities
JavaScript · Business+

Back to Top Button

Injects a floating back to top button that fades in after scrolling and smooth scrolls to the top when clicked.

Before-and-after browser views comparing a default gray scrollbar with a slim gold custom scrollbar
Layout & Utilities
CSS · Any plan

Custom Scrollbar

A slim, recolored scrollbar that matches your palette, covering WebKit browsers and Firefox with pure CSS.

The same article at 20 and 78 percent read with corresponding gold progress bars
Layout & Utilities
JavaScript · Business+

Reading Progress Bar

A thin gradient bar fixed to the top of the viewport that fills up as the visitor scrolls down the page.

Studio opening webpage with readable days, hours, minutes, and seconds countdown
Layout & Utilities
JavaScript · Business+

Countdown Timer

A date-configurable countdown showing days, hours, minutes, and seconds, in one self-contained code block.

Getting started

Two simple ways to add code

Every snippet page tells you which option to use and gives you the exact code to copy.

Any plan

CSS snippets

  1. Open Website → Website Tools → Custom CSS.
  2. Paste the snippet at the bottom and save.
Business+

JavaScript snippets

  1. Open Website Tools → Code Injection.
  2. Paste the script in Footer and save.

FAQ

Squarespace custom code questions

Answers are expanded by default so the guidance is immediately available. You can collapse any answer you do not need.

Is it safe to add custom code to a Squarespace site?

Yes, within reason. Custom CSS and code injection are official Squarespace features built for exactly this purpose, and none of the snippets here touch your content or data. The honest caveat: Squarespace support does not troubleshoot custom code, so add one snippet at a time and keep a copy of what you added. If anything ever looks wrong, removing the snippet returns your site to its previous state.

Do I need the Squarespace Business plan to use these snippets?

Only for the JavaScript ones. Pure CSS snippets work on any Squarespace plan through the Custom CSS panel. JavaScript requires code injection or a code block that runs scripts, and Squarespace gates both behind the Business plan or higher. Every snippet on this page is labeled so you know before you click.

Will Squarespace updates break these snippets?

Usually not, but it can happen. These snippets target stable Squarespace 7.1 selectors, and each snippet page includes an honest compatibility note. Squarespace occasionally renames classes or restructures blocks between template versions, so if a snippet stops working after a platform update, check the selector names first. That fixes the large majority of breakages.

Can I use these snippets on client sites or commercial projects?

Yes. Everything in this library is free to copy, modify, and ship on personal or client Squarespace sites, no attribution required. If you get stuck adapting one to a specific template, reach out through the contact page.

Need more than a snippet?

Let’s build the custom version properly

I build custom Squarespace widgets, filters, integrations, and complete sites when copy-paste code is not enough.

View services Start a conversation