Grayscale effect on Squarespace gallery sections

In this article, you’ll learn how to create a grayscale effect on Squarespace gallery sections - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!

---

1. Why use this code?

Sometimes, you want all of your logos or images to look uniform. By adding this grayscale effect, it unifies all of your gallery’s images. Then allowing the colour pop on hover really focuses the user on one image at a time.

Good stuff.

🚨 You’ll need to download the Squarespace Block Identifier chrome extension to target the correct section in the code below.

🚨🚨 This code only works for grid gallery sections. Replace ‘.gallery-grid-item’ with other targets to target other gallery types.

---

📩 Join the inner circle to get exclusive code updates

---

2. The code

Paste where? Design > Custom CSS

// Greyscale effect //

section[data-section-id="REPLACE ID HERE"] {

.gallery-grid-item img {

  filter: grayscale(100%);

  transition: filter .2s ease-in-out;

}

.gallery-grid-item:hover img {

    filter: none;

    transition: filter .2s ease-in-out;

}

}

---

3. Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?