SQUARESPACE 7.1
No code? No problem.
Customize your Squarespace site with free tools designed for the visual editor. Copy, paste, done.
Visual Editor Tools
Everything you need without touching code.
Generate CSS, pick fonts, build gradients, and more. Just copy and paste into Design → Custom CSS.
Button Style Generator
Design custom buttons with live preview and 10 presets. Copy the CSS into your Custom CSS panel.
Box Shadow Generator
Create multi-layer shadows with visual sliders. Paste into Custom CSS.
Gradient Generator
Build beautiful CSS gradients with up to 5 color stops and 12 presets.
Color Palette Generator
Pick a brand color, get a complete palette with contrast ratios.
Font Pairing Tool
Browse 15 curated Google Font combinations with live previews.
Animation Generator
Add hover effects and scroll animations — copy the CSS, paste it in.
Code Snippet Library
17 ready-to-use CSS snippets. Sticky headers, hover effects, and more.
CSS Cheat Sheet
Every Squarespace CSS selector organized and searchable. 117 selectors.
Section Style Builder
Visually customize any section — padding, colors, borders. No code needed.
SEO Checklist
45-item checklist to optimize your site for Google. Step by step.
Accessibility Checker
Check color contrast and run a 23-item accessibility audit.
Favicon Generator
Create favicons from text, emoji, or shapes. Download all sizes.
Version Detector
Find out if any Squarespace site is running 7.0 or 7.1.
Floating Social Links
Add sticky social media icons that float on the side of every page. Pick your platforms, colors, and style — visitors can follow you without scrolling.
Back to Top Button
A smooth-scroll button that appears after visitors scroll down. Customize the shape, color, icon, and position — then paste one snippet and you're done.
Announcement Bar
Create a custom announcement bar with your own colors, a dismiss button, and even a countdown timer for sales or launches. Way better than Squarespace's built-in one.
FAQ Accordion
Build beautiful collapsible FAQ sections that actually look good. Three styles, smooth animations, and it even generates the Google FAQ schema so your questions show up in search results.
Pricing Table
Create professional pricing comparison tables with up to 4 tiers, feature lists, and a monthly/yearly toggle. Drop it into any page as a Code Block.
Countdown Timer
Add urgency to any page with a live countdown to your launch, sale, or event. Three styles including a flip-card animation. Ticks in real time.
Popup Generator
Build email capture popups that trigger on exit intent, after a time delay, or when someone scrolls a certain percentage. No plugins, no monthly fees.
Newsletter Insert
Automatically inject a newsletter signup form into the middle of every blog post. Way more effective than a sidebar — readers see it when they're most engaged.
Testimonial Slider
Create auto-rotating testimonial carousels with star ratings, quotes, and author details. Three beautiful styles with dots and arrow navigation.
Before/After Slider
Let visitors drag to compare two images side by side. Perfect for showing transformations — restaurants, fitness, real estate, design work. Horizontal or vertical.
Scroll Progress Bar
Show a thin progress bar at the top of the page that fills as visitors scroll down. Great for blog posts — readers know exactly how much is left.
Reading Time Badge
Automatically calculate and display reading time on every blog post. '5 min read' — it builds trust and sets expectations so more people actually read your content.
Table of Contents
Automatically generate a clickable table of contents from your page headings. Highlights the current section as you scroll. Three layout styles.
Cookie Consent Banner
Add a GDPR-compliant cookie consent banner that matches your site's design. Remembers visitor choices so it only shows once. Three positions, three themes.
Masonry Gallery
Turn any Squarespace gallery into a Pinterest-style masonry layout with CSS only. Set columns, gaps, hover effects — no JavaScript required.
Custom Cursor
Replace the boring default cursor with something memorable. Dot follower, glowing ring, trailing particles, or custom text. Makes your site feel premium and interactive.
Typing Animation
Add a typewriter effect to any heading — it types, deletes, and cycles through multiple phrases. Eye-catching hero sections that keep visitors watching.
Parallax Sections
Make any section background scroll at a different speed for that premium depth effect. CSS-only or smooth JS option. One paste and your sections come alive.
Sticky Header
Take full control of your header — shrink on scroll, change colors, go transparent at the top, hide when scrolling down. Make it feel like a custom-built site.
Dark Mode Toggle
Give your visitors the option to switch between light and dark mode. Remembers their preference, respects system settings, and works on any Squarespace 7.1 site.
How to use these tools
Pick a tool above
Customize what you need
Copy the generated CSS
Go to Design → Custom CSS in Squarespace
Paste and save
A little over your head?
No shame — this stuff is hard. Let the pros handle it.
