30+ Super Useful Squarespace CSS Codes (2025 Cheat Sheet)

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 a Squarespace CSS cheat sheet come in handy.

Following are 31 hand-picked Squarespace custom CSS code snippets that will make your design process faster and easier.

Our 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 Squarespace custom CSS 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 CSS code 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 custom CSS 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 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 CSS 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;
}

32. Hide Blocks on Desktop and Mobile

This CSS snippet hides a block on either desktop or mobile, giving you control over its visibility across devices.

Customize: Replace BLOCK-ID with the block unique id
Plugin: Hide Blocks on Desktop and Mobile
CSS snippet:

/* Hide on Mobile (screens 768px and smaller) */
@media only screen and (max-width: 768px) {
    #BLOCK-ID {
        display: none !important;
    }
}

/* Hide on Desktop (screens 1024px and larger) */
@media only screen and (min-width: 1024px) {
    #BLOCK-ID {
        display: none !important;
    }
}

33. Hover 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 {
  animation: bounce 3.5s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    /* Starting and ending position */
  }
  
  50% {
    transform: translateY(-20px);
    /* Peak of bounce movement */
  }
}

34. Navigation Hover Color

This CSS snippet changes the text color of navigation items when they are hovered over.

Customize: Change the #000 to the colors of your choice.
Plugin: Header Link Styles
CSS snippet:

.header-nav-item a:hover {
    color: #000 !important;
}

35. Drop-down Menu Gap

Easily adjust the gap of the navigation items in the drop-down menu.

Customize: Adjust the px values to control the gap.
Plugin: Drop-down Menu Gap
CSS snippet:

/* Drop-down Menu Gap */
.header-nav-folder-item a {
   padding-top: 10px !important; 
   padding-bottom: 10px !important;
}

36. Three-Column Gallery Grid on Mobile

This CSS modifies the gallery grid layout for screens 767px wide or smaller, ensuring it displays three columns on mobile devices.

CSS snippet:

/* three-column gallery grid on mobile */
@media only screen and (max-width: 767px) {
  .gallery-grid-wrapper {
    grid-template-columns: 1fr 1fr 1fr !important; 
    }
}

37. Hide Background Art Pause/Play Button

This CSS hides the background art pause/play button across the website.

CSS snippet:

/* Hide Background Art Pause/Play Button */
.background-pause-button {
    display: none !important;
}

38. File Upload Font Size

Change the file upload font size.

Customize: Adjust the px values to change the font size.
CSS snippet:

/* Adjust the font size for file upload text */
.utsR_PbuBlohcFioliRe {
    font-size: 16px !important;
}

39. Quote Source Left Alignment

Easily left align the quote source of the quote block.

CSS snippet:

/*  Quote Source Left Alignment */
.sqs-block-quote .source {
    text-align: left; /* Aligns to the left */
}

40. Gallery Lightbox Close Icon Size

With this CSS you can change the size of the gallery lightbox close icon.

Customize: Adjust the scale value to change its size.
CSS snippet:

/* Gallery Lightbox Close Icon Size */
.yui3-lightbox2 .sqs-lightbox-close {
    scale: 2 !important;
    translate: 10px 10px !important; 
}

41. Hide Announcement Bar Close Icon

Easily hide the announcement bar close icon.
Plugin: Hide Announcement Bar Close Icon
CSS snippet:

/* Hide Announcement Bar Close Icon */
.sqs-announcement-bar-close {
     display: none;
}

42. Display Product Breadcrumbs On Mobile

This CSS displays the product breadcrumbs on mobile.
CSS snippet:

/* Display Product Breadcrumbs On Mobile */
div.ProductItem-nav-breadcrumb {
    display: flex !important;
}

43. Instagram Feed Border Radius

Easily add border radius to all of your Instagram feed images.

Customize: Adjust the px values to change the border radius.
CSS snippet:

/* Instagram Feed Border Radius */
div.instagram-block .slide a {
  border-radius: 10px !important;
}

44. Floating Header + Border Radius

This CSS gives the header a new look (floating) and adds border radius.

Customize: Adjust the px values to change the header margin and the border radius.
CSS snippet:

/* Floating Header + Border Radius */
.header {
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

45. Footer Shadow

This CSS adds top shadow to the footer.

Customize: Adjust the px values to change the shadow direction and intensity. Change “#030303” to change the shadow color.
CSS snippet:

/* Footer Shadow */
#footer-sections {
    z-index: 99999 !important;
    box-shadow: 0px 17px 30px 0px #030303;
}

46. Hide Blog Post Titles

This CSS hides the blog post titles on your Squaresapce website.
CSS snippet:

/* Hide Blog Post Titles */
h1.blog-title, .blog-item-title {
    display: none !important;
}

47. Drop-down Menu Auto Width

This CSS adds auto width to the drop-down menu making sure it expands based on the length of the menu item.
CSS snippet:

/* Drop-down Menu Auto Width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

48. Shop Category Hover Effect

This CSS adds hover effect to the shop category.

Customize: Change “red” to your desired color.
CSS snippet:

/* Shop Category Hover Effect */
.products.collection-content-wrapper 
.nested-category-tree-wrapper li:hover {
  color: red;
}
.products.collection-content-wrapper 
.nested-category-children :hover {
  color: red;
}

49. Contact Form "Thank you!" Message Font Color

This CSS changes the contact form "Thank you!" message font color.

Customize: Change “red” to your desired color.
CSS snippet:

/* Contact Form "Thank you!" Message Font Color */
div.form-submission-text {
  color: red !important;
}

50. Blurry Drop-down Menu

This CSS adds a blurry effect to the drop-down menu.

Customize: Adjust the px values to control the blur.
CSS snippet:

/* Blurry Drop-down Menu */
.header-nav-folder-content {
  background: transparent !important; 
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

51. Portfolio Pagination Arrows: Size + Color

This CSS increases the size and changes the color of the portfolio pagination arrows.

Customize: Adjust the scale values to control the size and change “red” to any color you wish.
CSS snippet:

/* Portfolio Pagination Arrows: Size + Color */
.item-pagination-link .item-pagination-icon svg {
  font-size: 2em !important;
  transform: scale(2.5) !important;
  stroke: red !important;   
}

52. Drop-down Menu Arrow

This CSS adds an arrow to indicate an navigation item has a drop-down menu activated.

Customize: Adjust the px values to customize the arrow even further.
CSS snippet:

/* Drop-down Menu Arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 1px;
    font-size: 1.1em; /* Ensures a thin appearance */
    margin-left: 4px;
    transform: scale(0.8); /* Shrinks the arrow */
    display: inline-block;
}
/* Rotate arrow on hover */
a.header-nav-folder-title:hover:after {
    transform: rotate(180deg) scale(0.8);
}

53. Sold-out Font Color + Strike-through

This CSS changes the sold out text color and adds a strike-through.

Customize: Change “red” to any color you like.
CSS snippet:

/* Sold-out Font Color + Strike-through */
.product-mark.sold-out {
    color: red !important;  
    text-decoration: line-through;
}

54. 2-Column Drop-down Menu

This CSS adds a second column to the drop-down menu.

CSS snippet:

/* 2-Column Drop-down Menu */
div.header-nav-folder-content {
    column-count: 2;
}

55. Blog Thumbnails Solid Shadow

This CSS adds a solid shadow to all blog thumbnails.

Customize: Change the px values and “black” to customise the shadow even further.
CSS snippet:

/* Blog Thumbnails Solid Shadow */
.blog-item .image-wrapper {
  color: black !important;
  border: 1px solid black !important;
  box-shadow: 8px 8px black !important;
}

56. Promotional Popup Border Radius

Easily add border radius to the promotional popup.

Customize: Adjust the px values to change the border radius.
CSS snippet:

/* Promotional Popup Border Radius */
.sqs-slide-layer-content {
  border-radius: 20px !important;
}

57. Align Social Media Icons on Mobile

This CSS aligns the social media icons block on mobile only.

Customize: Change “center” to “left” or “right” to change the alignment.
CSS snippet:

/* Align Social Media Icons on Mobile */
@media only screen and (max-width: 767px) {
  .social-icon-alignment-left .sqs-svg-icon--list {
    justify-content: center;
  }
}

58. Shop Page: Inline Product Price

This CSS makes the product price on the shop page to be inline with the product title.

CSS snippet:

/* Shop Page: Inline Product Price  */
.grid-main-meta {
  display: inline-flex;
  justify-content: space-between; 
  width: 100%;
}
.grid-prices {
  margin-top: 0px !important;
}

59. Summary Block: Sold Out Tag Color

This CSS let’s you customize the color of the sold out tag for the summary block.

Customize: Change “red” to “white” or to the color of your choice.
CSS snippet:

/* Summary Block: Sold Out Tag Color */
.sqs-block-summary-v2 .summary-product-status .product-mark {
    background: red !important;
    color: white !important;
}

60. Gallery Grid Simple: Caption Font Size

This CSS let’s you control the caption font size of the gallery grid simple.

Customize: Change the px values to control the font size.
Plugin: Gallery Grid Simple: Caption Font Size
CSS snippet:

/* Gallery Grid Simple: Caption Font Size */
p.gallery-caption-content {
    font-size: 30px !important;
}

61. Gallery Grid Simple: Hover Effect

Easily add a hover effect to the gallery grid simple.

Customize: Change “500ms” to control the hover transition speed.
CSS snippet:

/* Gallery Grid Simple: Hover Effect */
.gallery-grid-item-wrapper:hover img {
   filter: grayscale(0);
    transition:ease-in-out 500ms;
  &:hover {
    filter: grayscale(1);
  }
}

62. Rounded Floating Cart

This CSS makes the floating cart completely rounded.

CSS snippet:

/* Rounded Floating Cart */
.floating-cart {
	border-radius: 70px !important;
}

63. Drop-down Menu Border Radius

Easily add border radius to the drop-down menu.

Customize: Adjust the px values to control the radius.
Plugin: Drop-down Menu Border Radius
CSS snippet:

/* Drop-down Menu Border Radius */
.header-nav-folder-content {
  border-radius: 10px!important;
}

64. List Section Items Border Radius

This CSS adds border radius to the list section items.

Customize: Adjust the px values to control the radius.
CSS snippet:

/* List Section Items Border Radius */
.list-item {
  border-radius: 20px !important;
  overflow: hidden;
}

65. Footer: Remove Underline from Links

This CSS removes the underline from any link in the footer.

CSS snippet:

/*Footer: Remove Underline from Links*/
footer .sqs-block-html a {
  background-image: none !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}

66. Accordion Button

This CSS adds a button inside the accordion block.

Customize: Change the px values and colors to customise the button even further. Note: Add a link in the accordion description box to active the button.
CSS snippet:

/* Accordion Button */
.sqs-block-accordion .accordion-item__description a {
  background: linear-gradient(45deg, #FF66CC, #FF99CC) !important;
  color: white !important;
  padding: 12px 25px !important;
  border-radius: 25px !important;
  display: inline-block;
  margin-top: 5px !important;
  transition: background 0.3s ease, transform 0.3s ease;
}
.sqs-block-accordion .accordion-item__description a:hover {
  background: linear-gradient(45deg, #FF55BB, #FF88BB) !important; 
  transform: translateY(-2px);
}

67. Video Block Solid Shadow

This CSS adds a solid shadow to video blocks.

Customize: Change the px values and “black” to customise the shadow even further.
CSS snippet:

/* Video Block Solid Shadow */
.video-block {
color: black !important;
  border: 0px solid black !important;
  box-shadow: 10px 10px black !important;
}

68. Frosted Mobile Menu Background

This CSS adds a frosted effect to the mobile menu background.

Customize: Change the px values and to customise the effect.
CSS snippet:

/* Frosted Mobile Menu Background */
.site-wrapper .header-menu .header-menu-bg {
  background-color: rgba(0,0,0,0.2)!important;
}
.header--menu-open {
  #page {
  filter: blur(5px) !important;
  }
}

69. Gradient Header Button

This CSS snippet gives the header button a nice gradient color.

Customize: Change “#ff9a9e ” to the color of your choice.
Plugin: Animated Button Styles
CSS snippet:

/* Gradient Header Button */
.header-actions .btn, .header-menu .header-menu-cta a {
  background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fcb69f, #a18cd1, #fbc2eb, #8fd3f4, #ff9a9e);
}

70. Carousel Image Hover Effect

This CSS snippet adds a nice hover effect to the carousel images.

Customize: Change “0.5s ” to control the transition speed.
CSS snippet:

/* Carousel Image Hover Effect */
.user-items-list-carousel__media-inner::after {
  background: rgba(0, 0, 0, 0.5) !important;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
  pointer-events: auto;
}
.user-items-list-carousel__media-inner:hover::after,
.user-items-list-carousel__media-inner:focus::after {
  opacity: 0;
  box-shadow: 0px 0px 30px rgba(0, 255, 255, 0.7);
}

71. Calendar Block: Hide Event Time

Easily hide the event time in the calendar block.

CSS snippet:

/*Calendar Block: Hide Event Time */
.item-time,.flyoutitem-datetime {
    display: none !important;
}

72. Product Sold-out Strike-through

This CSS snippet adds a strike-through to the product title, price, sold out & button text.

CSS snippet:

/* Product Sold-out Strike-through */
.sold-out * {
    text-decoration: line-through !important;
}

73. Footer: Social Icons Hover Color

Add a nice hover color to the footer social icons with this awesome CSS snippet.

Customize: Change “pink ” to the color of your choice.
CSS snippet:

/* Footer: Social Icons Hover Color */
footer.sections a:hover use.sqs-use--icon {
    fill: pink !important;
}

74. Header Hover Color

This CSS snippet changes the header color on hover.

Customize: Change “pink ” to the color of your choice.
CSS snippet:

/* Header Hover Color */
header#header,
header#header .header-background-solid {
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
header#header:hover,
header#header:hover .header-background-solid {
  background-color: pink !important;
  opacity: 1 !important;   
}

75. Accordion: Title + Icon Hover Color

This CSS snippet adds a hover color to the accordion title & icon.

Customize: Change “pink ” to the color of your choice.
CSS snippet:

/* Accordion: Title + Icon Hover Color */
.accordion-item:hover {
  .accordion-item__title, .accordion-icon-container {
    color:pink !important;
  }
}
.accordion-item[data-is-open="true"] {
    .accordion-item__title, .accordion-icon-container {
    color:!important;
  }
}

76. Blog Thumbnails Border Radius

This CSS adds border radius to all blog thumbnails.

Customize: Change the px values to control the radius.
CSS snippet:

/* Blog Thumbnails Border Radius */
.blog-item .image-wrapper {
  border-radius: 20px !important;
}

77. Portfolio Grid Overlay: Uppercase Title

This CSS snippet transforms the portfolio grid overlay title from lowercase to uppercase.

CSS snippet:

/* Portfolio Grid Overlay: Uppercase Title */
h3.portfolio-title, span.portfolio-hover-item-content {
    text-transform: uppercase !important;
}

78. Banner Slideshow: Gradient Arrow Background

This CSS adds a gradient background to the banner slideshow arrows.

Customize: Change “#ff6b6b, #f06595, #cc5de8, #845ef7” to the color of your choice.
CSS snippet:

/* Banner Slideshow: Gradient Arrow Background */
button.user-items-list-banner-slideshow__arrow-button>div {
  background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8, #845ef7) !important;
  background-size: 100% 100% !important; 
}

79. Product Quantity: Background Color + Border Radius

This CSS adds a background color & border radius to the product quantity box.

Customize: Change “pink”to the color of your choice and the px values to control the border radius.
CSS snippet:

/* Product Quantity: Background Color + Border Radius */
.product-quantity-input input[type="number"] {
    background-color: pink !important;
    border-radius: 20px !important;
}

80. Accordion: Background + Border Radius + Hover

This CSS adds a background color, hover color & border radius to accordion block.

Customize: Change “pink” and “grey” to the color of your choice and the px values to control the border radius, padding and margin.
CSS snippet:

/* Accordion: Background + Border Radius + Hover */
div.accordion-divider {
    display: none;
}
li.accordion-item {
    background-color: pink;
    margin-bottom: 12px !important;
    border-radius: 12px;
    padding: 0px 12px !important;
}
li.accordion-item:hover {
    background-color: grey !important;
    transform: translateY(-3px);
}

81. Newsletter Email Address Field Border Radius

This CSS applies a border-radius to the email input field in the newsletter form.

Customize: Change "8px" to adjust the roundness of the corners.
CSS snippet:

/*Newsletter Email Address Field Border Radius*/
.newsletter-form-field-element {
  border-radius: 8px !important;
}

82. Hide "View Event" Button

This CSS hides the "View Event" button in the event list.

Customize: If you want to hide only specific buttons, consider adding a more specific selector. - Use `display: none !important;` to ensure the button is completely hidden.

CSS snippet:

/*Hide "View Event" Button*/
a.eventlist-button.sqs-editable-button.sqs-button-element--primary {
    display: none !important;
}

82. Carousel: Two-column on Mobile

This CSS modifies the carousel layout for screens 767px wide or smaller, ensuring it displays two columns on mobile devices.

Customize: Replace SECTION-ID with the section unique id.
CSS snippet:

/* Carousel: Two-column on Mobile */
@media screen and (max-width: 767px) {
  section[data-section-id="679737c14ad37117aa933e71"] ul {
  display: grid;                       
  grid-template-columns: repeat(2,         1fr) !important;         
  }
}

83. Site Title Subtitle

This CSS adds a subtitle below the main site title in the header.

Customize: Change "Your Text Here" (in the content property) to your desired subtitle text. Adjust font-size, color, and positioning (top, left, width) as needed.
CSS snippet:

/* Site Title: Subtitle */
header .header-title a:after {
  content: "Your Text Here";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  font-size: 1rem;
  color: black;
}

84. Blog "Read More" Button

This CSS snippet turns the “read more” text on the blog page into a button, adds a background color, hover effect, and border radius.

Customize: Change “pink” (base background) and “#ff80ab” (hover background) to your preferred colors. - Adjust padding, margin, and border-radius values to control spacing and rounding.
CSS snippet:

/* Blog "Read More" Button */
.blog-more-link::after {
display:none;
}
.blog-more-link {
 border: 0px solid #000; 
 padding: .9rem!important; 
 margin-top:.5rem;
 border-radius: 10px;
 background: pink; 
 color: white !important;
}
.blog-more-link:hover {
    background: #ff80ab;
    transform: scale(1.05);
}

85. Full-width Mobile Menu CTA

This CSS makes the call-to-action (CTA) button in the mobile menu span almost the full width.

Customize: Adjust "86vw" to control the button width (e.g., 90vw for a wider look).
CSS snippet:

/* Full-width Mobile Menu CTA */
.header-menu-cta a {
    width: 86vw !important;
}

Three Alternatives to Squarespace Custom CSS

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 custom CSS 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:

1. Open the Squarespace Dashboard, and select your site.

2. Go to Website, then scroll down to Website Tools, and lastly Custom CSS.

3. 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 Squarespace CSS cheat sheet, I’ve gathered a collection of useful CSS code snippets to help customize your Squarespace website and make it truly stand out. Whether you’re tweaking fonts, adjusting layouts, or adding stylish effects, these codes are designed to simplify your design process.

Got a favorite CSS trick that’s not on the list? Or maybe a code snippet you think others would love? Let me know in the comments or send me a message—I’d love to include your suggestions and make this guide even better for the Squarespace community!