When it comes to web design, it’s no secret that I’m one platform kinda gal. (Squarespace everything. All the time.)

And one of the reasons for my undying love of this platform is that it allows you to create a completely custom, nothing-like-the-template, absolutely gorgeous, client-converting machine of a website…without ever having to learn to code!

In fact, I created an online course to show you just how to do that!

If you’re ready to ditch the cookie cutter designs and learn the advanced secrets to making a truly fabulous website, then Square Secrets is the place for you!

(Hoping to turn those sick new Squarespace skills into a successful, totally booked out design biz? My course Square Secrets Business has you covered, too.)

It’s 100% possible to be an uber successful Squarespace designer without the use of code, and yet CSS is one of the things I’m most asked about, or is most searched on the blog!

So I figure, give the people what they want, right? Today, I’m doing a round-up of alllll the fabulous free CSS code snippets and plugins for use with your Squarespace site!

PS. Before you go copy and pasting every single line of CSS you can find, I highly suggest that you check out this little disclaimer from our friends over at Squarespace, first.

Happy coding!

35 CSS code snippets & plugins for your Squarespace site

1. Add extra heading style options to your text block editor (ie. Heading 4, Heading 5)

Want to add a different style, size, or color of font option to your text block, beyond what you’ve already assigned in your style editor settings? Messua over at Mesua Design & Media has got you covered. Check out her post How to add h4 & h5 to your squarespace website.


2. Create Vertical Text in Squarespace

It can be superrr easy to drop in an image of your vertical text created first in something like Adobe Illustrator or Canva, but there are a few reasons why you may want to consider using CSS to get the look instead!

Beatriz of Thirty Eight Visuals is sharing allll those reasons (and how to make it happen) here.



3. Change the button color on hover

Want to spice up your site a little with some fancy button color changing magic? Our friends over at InsideTheSquare share how to change the color of your buttons when a visitor hovers over them in this video!


4. Add Text overlay to image on hover

Loving the change on hover effect? Here’s another really neat way to use it for your images! Follow along with Carl Johnson as he walks you through the steps to adding text to an image on hover in this video tutorial!





5. cUSTOMIZE Your EU COOKIE BANNER IN SQUARESPACE

So you know you need an EU cookie banner (thanks GDPR) but you’re not exactly thrilled with Squarespace’s cookie-banner styling options. Not to worry! Station Seven is showing us more than one way to style this bad-boy in this post (including CSS to change up your cookie banner typography, background, and button style, as well as how to add a fancy drop shadow!)


6. Customize the Read More Links for your blog

Wishing your the read more links on your Squarespace blog were just a little more on-brand? Our girl Megan Minns has just the code you need to make that happen! Check out her post How to Customize the Read More Link on Squarespace Blog Post Excerpts to learn more!


7. Create Angled Sections

Want to create more interest in your section backgrounds? S-E Web Design has a few CSS tweaks to send your way! Check out their video tutorial here!


8. Add A Branded Background + Border To Your Quoted Text

Squarespace has a few different options for including quotes on your website or blog post. You can use a basic text block, selecting the quote format for your text, or you can use an actual quote block. Here’s an example of Squarespace’s quote block in action…

>
“Inspiring AF quote that makes you want to change your entire life .”

— Person you admire

While there is something to be said for simplicity, you may be looking for ways to add a little more flare to your quotes. MyBillieDesigns.com has just the Squarespace CSS hack you need to make that happen.

(You can find that post here.)



9. HIDE THE HEADER, NAVIGATION & FOOTER ON SPECIFIC SQUARESPACE PAGES

When you have a page with a very specific goal, such as getting a visitor to opt-in to your email list or purchase something on a sales page, it’s considered best design practice to give only one option on that page (the thing you want them to do).

To do this, you are going to want to remove all other distractions that would potentially lead them away from that page (yes, even if it’s to another page on your own site)!

I’m sharing the custom CSS you need to hide your header, navigation, and footer in this post.

And while you are over there, you may as well check out CSS hack number 10, 11, and 12, too…

10. HIDE THE UNDERLINE BELOW LINKS IN YOUR SQUARESPACE FOOTER

Even if the template I’m using has a footer navigation, I end up just creating text links for my footer, because I like the flexibility of design better with text links than the footer navigations.

However, a lot of the templates have underlines for links, and that makes things look rather squished and messy.

If you’re also not a fan of the underline look, then I have just the CSS you need to get rid of it in this post.

11. SPLIT YOUR SQUARESPACE FOOTER INTO TWO COLOR BLOCKS

This one is hands down my fav, because I always love putting opt-in gifts in footers, cause you know, they show up on every page of a site so they tend to convert really well!

Normally however Squarespace footers are just one color, and I like for my opt-in gift to be really noticeable and pop! So, making the footer a different color really helps with this. (Find out how here.)

12. CHANGE THE BACKGROUND COLOR OF A GALLERY BLOCK TO TRANSPARENT OR A COLOR

Find the background color of the gallery block annoying? Me too. You can find the CCS snippet needed to change that here.

13. add a half background to your page section

If you are looking for a way to add a half, angled, or floating backgrounds to your page sections (with and without parallax scrolling), then look no further than this post – another one by our friends over at Thirty Eight Visuals!


14. CREATe GRADIENT BUTTONS

Back to those buttons! If a solid color button just won’t cut it, and you want to introduce a little gradient to your Squarespace button design, you may want to check out this post over at InsideTheSquare.co.


15. Make a vertical line

Squarespace has made it super easy for users to add a horizontal line using (you guessed it) a line block.

But until Squarespace introduces a vertical line block, we are going to have to rely on this handy little snippet of CSS from the team over at Minimist.ca.


16. Set a fixed width for buttons

Unless the text appearing on your buttons is exactly the same length, Squarespace is automatically going to scale your button to fit the text. If you are looking for a way to keep button widths consistent, head over to Jessicahainesdesign.com to get her simple CSS solution to fix this!


You’re also going to want to check out her other super handy CCS tweak…

17. Customize the Heading size and color on Summary Blocks

Summary blocks are a great way to completely change the layout of your Squarespace blog (more on that in my post How to completely redesign your Squarespace blog page). But Squarespace’s default settings for displaying summary block info may not be to your liking. Once again, Jessicahainesdesign.com comes to the rescue with this post.





18. CROP IMAGES INTO A CIRCLE

Tired of prepping your images in Canva or Adobe Illustrator? Insidethesquare.co has the CSS snippet you need to crop images into a circle right in Squarespace!



19. Remove hyphens on mobile

You’ve spent a lot of time designing your site, and honing in on your copy, and you are prettyyyy pleased with how things are looking…until you switch to mobile mode, that is.

Suddenly, your beautiful words are now chock full of annoying hyphens. Not to worry, Jgdigital.co has just the bit of CSS you need to say goodbye to these awkward hyphens once and for all. You can find that post here.

20. Install a Collapsible FAQ accordian

FAQ sections tend to get a bit wordy, and for the sake of aesthetic and ease of navigation, you may be looking for a way to keep this section of your site tidy! Collapsible Accordion Blocks are your answer! And this post by KaylieghNoele.com has everything you need to know in order to totally Mari Kondo your website’s FAQ section!


21. Add a gradient to only one word in your heading

If you want to highlight a certain word in your heading, adding a gradient to that one word is a fabulous way to do it. And good news, Thirtyeightvisuals.com is back at it again with this post which tells you how to use CSS to get things done!



22. CUSTOM CSS For mobile responsive font-size

Stuck choosing between mobile and desktop when it comes to styling your fonts? Now you don’t have to. Laceypassmandesign.com has you covered with just the CSS you need in her post How To: Customize Squarespace for Mobile | Part Two.


23. add icons to your navigation links

Want to spice up the design your Squarespace navigation? Thirtyeightvisuals.com suggests adding your brand’s custom icons! And they’re sharing the one bit of CSS code that you need to do it in this post.


24. Add a Background Color to a Text Block

If you’re embracing the long-scrolling page trend with your website, it’s important to break up your page into clearly defined, easy to digest sections (especially when there is a lot of text!)

Color blocking is one of the most effective ways to indicate the start of a new section and Bigcatcreative.com is bringing all the CSS savvy you need to add color to your text block’s background and make it really pop! (Check out that post here).

25. Set a custom blog width

As Juniperandroots.com points out, your blog page width will automatically default to whatever you set your page width to be in your site’s style editor. Depending on how wide you have this set, your blog posts may become difficult for readers to follow along with. She suggests narrowing your blog width, and in this post, she shares how to make that happen using custom CSS.

26. Change the colors of the social media icons

Social media icons are pretty universal, but that doesn’t mean you can’t make them just a little more on-brand. If you want to know how to use custom CSS to change the color of these well-known icons, head over to this post by Alexanderdesignco.com.


27. Hide Pinterest Images

If you’re creating content on a blog and want to take your Pinterest strategy game to the next level, having multiple pinnable images within your blog posts can be a very good idea! But you don’t necessarily want to have all those images appearing on your post. Head over to How to hide Pinterest images in a Squarespace blog post to get the deets on how to use this handy snippet of code!


28. Add Text Animation

Looking for way to have your text fade in on page load? Chris from Schwartz-edmisten.com is your guy! Check out this video tutorial to see how you can use custom CSS to add animation to your Squarespace text!

29. Control index Page Banner Height

Need all the functionality of an index page but need it to look the same as your other pages? Chris has another fabulous free CSS hack waiting for you over here.



30. Add A Custom Background To Your Site Navigation

This super cool Squarespace custom design idea comes to you from mybilliedesigns.com. Check out this post to see how she uses CSS to style her site navigation.



31. Create rollover effects on Squarespace image blocks

For another fun way to add animation to your Squarespace site, check out this post by Pixelhaze.academy. This CSS snippet allows you to add a custom overlay to your image that only appears when a visitor hovers over that particular image.


32. Resize images on mobile

As Rebeccagracedesigns.com points out, making sure your site is mobile friendly is a non-negotiable these days. Not just for your visitors, but for the SEO God’s combing your site to see just how high they should rank you in that google search!

But simply having your site work on mobile is not enough, you want your mad design skills to transfer too! In this post, Rebecca shows us how to use CSS to resize your images in Squarespace to ensure they look fab, no matter the screen size!


33. Hide images in mobile

Sometimes, no matter what you do, your images or graphics just don’t look quite right on mobile, but removing them all-together could make or break your design! In this post from Ljmediahouse.com, they’re sharing which bit of CSS you need to make it so that you can keep your images in desktop and magically make them disappear in mobile!


34. Display one product per row on mobile

This one is for my Squarespace E-Commerce users. Is mobile view making your product listings a little too small? Check out this post from Decibelpromo.com for the CSS tweak you need to make your products display single file!


35. Create a custom cover page

If you’re not a fan of the cover page layouts currently offered in Squarespace, you’re going to want to check out this CSS hack from Heathertovey.com which will allow you DIY your cover page design!

/




/

You’ll also love . . .

35 CSS code snippets & plugins for your Squarespace site