30+ Super Useful Squarespace CSS Codes (Updated 2024)
Squarespace is a great tool for creating websites. It has some quirks, though, and it can take a while to figure out how to do everything you want to.
That's where free Squarespace CSS codes come in handy.
Following are 31 hand-picked Squarespace custom CSS code snippets that will make your design process faster and easier.
Squarespace CSS cheat sheet:
1. Solid shadow button
Get a new style on your buttons. Get even more button styles with this plugin.
Customize: Change ‘rgb(255, 87, 106)’ to the color of your choice.
Plugin: Animated Button Styles
CSS snippet:
.sqs-block-button .sqs-block-button-element {
box-shadow: 7px 7px rgb(255, 87, 106);
transition: 120ms !important;
}
.sqs-block-button .sqs-block-button-element:hover {
box-shadow: 4px 4px rgb(255, 87, 106);
transform: translateY(2px) !important;
opacity: 1 !important;
}
.sqs-block-button .sqs-block-button-element:active {
box-shadow: none;
transform: translateY(4px) !important;
}2. Vertical lines
This custom Squarespace CSS code adds vertical lines in Squarespace as default, instead of horizontal. Get even more line customizations with this plugin.
Customize: Change ‘width’ to increase the width, and change ‘height’ to increase length.
Plugin: Custom Line Styles
CSS snippet:
hr {
width: 1px !important;
height: 100px !important;
}3. Change dropdown menu color
Now you can change the dropdown menu color!
Customize: To change color, change the rgb values to your liking.
Plugin: Dropdown Menu Color
CSS snippet:
.header-nav-folder-content {
background-color: rgb(255, 87, 106) !important;
}
.header-nav-folder-item a {
color: rgb(255, 255, 255) !important;
}4. Header line
This Squarespace code snippet adds a simple straight line to your header.
Customize: To change color, change the rgba value to your liking.
Plugin: Header Line
CSS snippet:
#header {
box-shadow: 0px 0px 1px 0px rgba(170,170,170,1) !important;
}5. Animated links
Adds a cool animated marker effect when hovering links. Get even more link styles with this plugin.
Customize: To change color, change the rgba value to your liking.
Plugin: Animated Link Styles
CSS snippet:
.sqs-block-html a {
text-decoration: none !important;
box-shadow: inset 0 -1px 0 0 rgba(255, 87, 106, 0.3) !important;
color: inherit !important;
transition: box-shadow 200ms !important;
background-image: none !important;
}
.sqs-block-html a:hover {
box-shadow: inset 0 -12px 0 0 rgba(255, 87, 106, 0.3) !important;
}6. Gradient backgrounds
A gradient background is a fantastic way to create an eye-catching effect on your Squarespace website. It’s awesome if you want to show off your brand colors on your home page or about us section!
You can use this Squarespace CSS code to change the gradient color of your entire Squarespace site. Check out this plugin if you want to add a gradient to an individual section.
Customize: To change color, change the hex colors to your liking.
Plugin: Gradient Background
CSS snippet:
.site-wrapper {
background: linear-gradient(-45deg, #ff576a, #b81bef) !important;
}
.page-section, .section-background {
background: transparent !important;
}7. Smaller margins on heading 3 and heading 4
The default margins of heading 3 and heading 4 in Squarespace can be huge. Not any more!
Customize: Change ‘1rem’ to make the margins smaller or bigger. Maybe you want to make them even bigger than the default? :o
CSS snippet:
h3, h4 {
margin: 1rem 0;
}8. Scroll indicator
Only one out of five website visitors scroll down to the bottom of a webpage. If you have any crucial information or call-to-actions below the fold, prospective customers might miss out. Not with this scroll indicator!
Check out this plugin if you want to more options and many different scroll indicators to choose from.
Customize: Replace SECTION-ID with the section unique id. Adjust ‘2s’ to make the animation faster or slower.
Plugin: Scroll Indicators
CSS snippet:
SECTION-ID::before {
content: '';
animation: bounce 2s ease infinite;
bottom: 2rem;
border: solid;
border-width: 0 3px 3px 0;
padding: 12px;
display: inline-block;
left: 50%;
transform: rotate(45deg) translateX(-72.5%) translateY(0%);
position: absolute;
z-index: 1;
}
@keyframes bounce {
50% {
transform: rotate(45deg) translateX(-50%) translateY(30%);
}
}9. Highlight your headings
Want to highlight text and make your unique selling point stand out on Squarespace? This Squarespace CSS code will make your headings so vivid that your web visitors will love them.
Check out this plugin if you want more options and header effects to choose from.
Customize: Mark the heading sections with bold that you want the effect to be added to. Then change the rgba values to the color of your choice.
Plugin: Custom Text Styles
CSS snippet:
:is(h4, h3, h2, h1, .list-section-title) strong {
font-weight: inherit !important;
box-shadow: inset 0 -0.45em 0 0 rgba(255, 87, 106, 0.3) !important;
}10. Zoom in images on hover
This Squarespace custom CSS code snippet adds a zoom in effect to image blocks when hovered.
Customize: Change ‘1.6s’ to the speed of your choice.
Plugin: Image hover effects
CSS snippet:
.sqs-block-image img {
transition: ease-in-out 1.6s !important;
}
.sqs-block-image:hover img {
transform: scale(1.15) !important;
}11. Change opacity of any block
Adjust the opacity of any block on your Squarespace website. Great for making unique designs and toning down less important parts of your site. Check out this plugin if you want more options to choose from.
Customize: Replace BLOCK-ID with the block unique id. Adjust ‘0.2’ to the opacity that you prefer.
Plugin: Change Block Opacity
CSS snippet:
BLOCK-ID .sqs-block-content {
opacity: 0.2 !important;
}12. Smaller headings in blog posts
Do your headings end up taking up taking too much space in your blog posts? Use this CSS snippet to make it smaller.
Customize: Change the numbers to make the margins smaller or bigger.
CSS snippet:
@media screen and (min-width: 800px) {
.blog-item-wrapper h1 {
font-size: 3.4rem !important;
}
.blog-item-wrapper h2 {
font-size: 2.4rem !important;
}
.blog-item-wrapper h3 {
font-size: 1.5rem !important;
}
.blog-item-wrapper h4 {
margin-bottom: 0.5rem !important;
}
}13. Vertical text
Easily create vertical text on your site. Copy the code below, and Italicize the text you want vertical.
Customize: To make the text tilt instead, change from ‘180deg’ to ‘20deg’.
Plugin: Rotate Anything
CSS snippet:
@media only screen and (min-width: 800px) {
em {
transform: rotate(180deg);
width: auto !important;
writing-mode: vertical-rl;
text-orientation: sideways-right;
}
}
em {
font-style: normal !important;
}14. Soft corners on all images
Make all your images get soft corners.
Customize: Change ‘8px’ to make the corners more or less soft.
CSS snippet:
.image-block-outer-wrapper :is(img, .image-overlay) {
border-radius: 8px !important;
}15. Animated gradient announcement bar
Make your Squarespace announcement bar draw more attention with this little CSS code snippet.
Customize: Change the colors (#0d7d88,#708090,#add8e6) to your match your site.
Plugin: Animated Announcement Bar
CSS snippet:
[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
background: linear-gradient(99deg,#0d7d88,#708090,#add8e6);
background-size: 400% 400%;
animation: AnimationName 6s ease infinite;
}
@keyframes AnimationName {
0% {
background-position: 0% 49%
}
50% {
background-position: 100% 52%
}
100% {
background-position: 0% 49%
}
}16. Simple Blog Post Style
Give your blog posts in the Basic Grid Blog layout a modern look.
Customize: Change the #ffffff to the color of your choice.
Plugin: Card Blog Posts
CSS snippet:
.blog-basic-grid--container {
background-color: #ffffff !important;
color: #000000 !important;
}
.blog-basic-grid--text {
padding: 40px;
width: calc(100% - 20px) !important;
}
.blog-article-spacer {
height: 0px !important;
}17. Custom CSS Video Play Button
This Squarespace CSS code updates the play button icon to your own icon.
Customize: Replace IMAGE-URL-HERE with the link of the icon you'd like to use.
Plugin: Custom Video Play Buttons
CSS snippet:
.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
position: absolute;
top: 50%;
left: 50%;
background: transparent url(IMAGE-URL-HERE) center center no-repeat;
background-size: cover !important;
filter: invert(100%);
height: 60px;
width: 60px;
cursor: pointer;
}18. Banner Slideshow - Card Style
Add a border and background style to the banner slideshow (auto layout) card style.
Customize: Adjust the border radius, and background values to your liking.
Plugin: Card Banner Slideshows
CSS snippet:
.user-items-list-banner-slideshow .slide-content {
padding: 40px;
background: #ffffff !important;
border-radius: 20px;
}19. Rotate Blocks
Rotate any block on your Squarespace site.
Customize: Replace BLOCK-ID with the block unique id. Adjust ‘20deg’ to the rotation that you prefer.
Plugin: Rotate Blocks
CSS snippet:
BLOCK-ID {
transform: rotate(20deg);
}20. Spin animation
Animate any block on your Squarespace site! Get even more animations with this plugin.
Customize: Replace BLOCK-ID with the block unique id. Adjust ‘15s’ to the time that you prefer.
Plugin: Block Animations
CSS snippet:
BLOCK-ID .sqs-block-content {
animation: spin-forever 15s linear infinite;
}
@keyframes spin-forever {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}21. Top and Bottom Site Header Border
Add a simple border to the top and bottom of the site header.
Customize: Adjust both border px and color values to your liking.
Plugin: Header styles
CSS snippet:
.header-announcement-bar-wrapper {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
margin: 20px;
width: auto !important;
}22. Mobile Font Size
Easily adjust the heading and paragraph text sizes on mobile.
Customize: Adjust the font size px values for the heading and paragraph text.
CSS snippet:
@media only screen and (max-width: 800px) {
h1 { font-size: 40px !important; }
h2 { font-size: 30px !important; }
h3 { font-size: 25px !important; }
h4 { font-size: 20px !important; }
.sqsrte-large { font-size: 18px !important; }
p { font-size: 15px !important; }
.sqsrte-small { font-size: 12px !important; }
pre { font-size: 12px !important; }
}23. GIF Mobile Menu Background
This Squarespace code snippet makes it possible to add your own GIF background image to the mobile menu.
Customize: Replace GIF-URL-HERE with the url of your own image.
Plugin: Improved mobile menu
CSS snippet:
.header-menu-bg {
background: url(GIF-URL-HERE);
background-size: cover;
background-position: center;
}24. Line Cookie Banner
The regular Squarespace cookie banner is ugly. Replace it with one that matches the rest of your design. Get more cookie banner styles with this plugin.
Customize: Change ‘1px’ to increase the width of the border. Or change ‘#000’ to a different color.
Plugin: Custom Cookie Banner Styles
CSS snippet:
.sqs-cookie-banner-v2.BAR {
border-top: 1px solid;
}
.sqs-cookie-banner-v2.POPUP {
border: 1px solid;
}
.sqs-cookie-banner-v2 {
border-color: #000 !important;
background-color: #fff !important;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2.LIGHT button, .sqs-cookie-banner-v2.LIGHT a {
color: #000 !important;
}
.sqs-cookie-banner-v2 button {
border-color: #000 !important;
}25. Grow Buttons On Hovered
This CSS snippet for Squarespace buttons adds a growing effect, making buttons scale to 110% of their original size when hovered over.
Customize: Change ‘0.3s’ to change the speed.
Plugin: Custom Button Styles
CSS snippet:
.sqs-block-button-element {
transition: transform 0.3s ease;
}
.sqs-block-button-element:hover {
transform: scale(1.1);
}26. 2 Fonts, 1 Line
Having two different fonts in the same line couldn’t be easier. On any page, highlight the text you’d like to change and select the bold style. Save the page when done.
Customize: Switch out the font family with the name of the font you’d like to use for the second font. Make sure that it is a web safe font, or that you’re using it on another place on your site. Want to use non-web safe fonts? Check out this guide on how to upload custom fonts to Squarespace.
Plugin: Custom Text Styles (does the same, but with a twist)
CSS snippet:
:is(h1, h2, h3, h4) strong {
font-family: Times New Roman !important;
}27. Floating Image Animation
Another simple effect in this Squarespace CSS cheat sheet. This one adds a gentle floating effect to images, making them appear to float up and down slightly.
Customize: Edit ‘2s’ to change the speed.
Plugin: Animated Images
CSS snippet:
.sqs-block-image img {
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}28. Invert the Logo Color
You’ve got a beautiful, perfectly sized logo that’s ready to go. The only issue is that it mysteriously disappears when you put your black logo on a black background. This Squarespace css code will fix that!
This code snippet inverts the color which might be an issue for some logos, so if you need an option that show a white logo version, try this plugin.
Customize: Replace PAGE-ID with the page id that you want the logo to be inverted on.
Plugin: Adaptive logo color
CSS snippet:
PAGE-ID .header-title-logo img {
filter: invert(100%);
}29. Improved Cart
This shopping cart makes it easier to see how many items that’s in the cart.
Customize: Change the #FFFFFF and #000000 to the colors of your choice.
Plugin: Improved Shopping Cart
CSS snippet:
.icon--cart {
stroke-width: 2px !important;
}
.icon-cart-quantity {
border-radius: 99px !important;
top: -0.8em !important;
right: -0.8em !important;
min-width: 0.7em !important;
height: 0.7em !important;
padding: 0.3em !important;
line-height: 0.7em !important;
font-weight: bold !important;
text-align: center !important;
font-size: 12px !important;
transition: 200ms !important;
background-color: #000000 !important;
color: #FFFFFF !important;
}
.icon-cart-quantity:not(.legacy-cart) {
right: 0.2em !important;
}30. Shadow behind images
This image CSS snippet adds a subtle shadow to image blocks within Squarespace, creating a sense of depth and visual interest. When users hover over the image, the shadow becomes darker.
Customize: Change the rgba values to the colors of your choice.
Plugin: Gallery Shadow Effect
CSS snippet:
.sqs-block-image {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.13);
transition: 0.3s;
}
.sqs-block-image:hover {
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}31. Section borders
This Squarespace CSS code will highlight your sections by adding a border around it. If you need more options or only want to add to one section, try this plugin.
Customize: Change the #000000 to the color of your choice.
Plugin: Section borders
CSS snippet:
.page-section .section-background {
border: 2px solid #000000 !important;
border-bottom-width: 0 !important;
}Three Alternatives to Squarespace CSS Codes
As we’ll discus later in this article, custom CSS codes are not risk-free.
The best alternative to using custom code is to use a plugin or extension that has an auto-update feature.
This means that the code will be updated whenever a new browser version is released, or Squarespace updates its service.
1. Spark Plugin
Spark Plugin is a no-code design tool that contains 100+ customizations for Squarespace websites.
With Spark Plugin, you don’t have to worry about your code ever breaking again.
There are some pretty nice customizations to choose from too.
2. Squarespace plugins
Plugins and extensions are often more sophisticated than little Squarespace code snippets and can be used as more safe alternatives to custom CSS code. Especially if they include an auto-update feature.
Here’s a super long list of Squarespace plugins.
3. Squarespace templates
Squarespace templates offer advanced functionalities beyond simple code snippets, serving as safer and more robust alternatives to custom CSS. Each template is fully customizable, allowing you to adjust layouts, colors, and fonts to create a unique online presence. With responsive design built in, your site will look great on any device, ensuring a seamless user experience.
FAQ - Squarespace Code Snippets
Can code snippets break my website?
Yes, custom CSS can break websites. Here are the three most common issues:
Squarespace updates its service. When Squarespace updates its services, your CSS code will stay the same. This can lead to a conflict between the two.
CSS code not tested in all browsers. While it might seem that the CSS code snippet works perfectly in your browser, it might have problems in other browsers.
CSS code not tested in mobile. Desktops and mobile use different screen sizes. On top of this, they treat functionality like hover- and touch very differently, which can lead to several issues.
Minimize the risk of site breaking due to code snippets
So should you stop customizing your website with Squarespace custom CSS and code snippets?
No, you can still use it if you consider these tips:
Use short Squarespace CSS codes. The longer the CSS snippets are, the higher risk it has of breaking.
Test your CSS snippets. Test in multiple browsers and mobile. This does not protect you from the future, but you have come a long way.
Use a plugin with auto-updating code, like Spark Plugin. The safest way to guarantee your site from not breaking is to use a plugin that updates the CSS codes for you. This is a must for high-visiting sites or sites that want high quality in general.
How to add CSS code snippets in Squarespace
New to Squarespace, or just need a refresher on how to add CSS code snippets to your site?
Here’s how to add Squarespace code snippets:
Open the Squarespace Dashboard, and select your site.
Go to Website, then scroll down to Website Tools, and lastly Custom CSS.
Paste in the CSS code snippet, and click Save.
The snippet is now added to your site!
So… what do you think of this Squarespace CSS cheat sheet?
In this CSS cheat sheet, I’ve compiled a list of Squarespace CSS code snippets to help make your website stand out.
If you have any favorites that I missed, let me know and I’ll add them to the list!
