Image Filter Codes for Squarespace
Learn more about the 6 different types of image filters you can use when creating custom CSS for your Squarespace site! Pro Tip: These codes can work for any image type, from on page images to portfolios and even blog thumbnails, as long as you use the right selector name or unique block id at the beginning of your code.
img {filter: grayscale(100%)}
This code will apply a grayscale filter to any image on your site. Adjust the level of the filter by changing the percentage between the parenthesis; 0% is no filter and 100% is full black and white.
img {filter: brightness(20%)}
This code will brighten or darken an image on your site. Adjust the level of the filter by changing the percentage between the parenthesis; 0% is dark, 100% is normal, and anything above 100% will increase the brightness.
img {filter: hue-rotate(180deg)}
This code will rotate the hue of the colors in any image on your site. Adjust the hue rotation using degrees in the code below; 0deg is normal and 180deg is rotated to the opposite colors on the color wheel.
img {filter: blur(5px)}
This code will apply a blur to any image on your site. Adjust the level of the blur by changing the number of pixels in the code; 0 is no blur and 100 is pretty darn fuzzy.
img {filter: contrast(150%)}
This code will change the contrast of an image on your site. Adjust the level of the filter by changing the percentage between the parenthesis; 0% is low contrast, 100% is normal, and anything over 100% will increase the contrast.
img {filter: invert(100%)}
This code will invert the colors of your image. Adjust the level of the filter by changing the percentage between the parenthesis; 0% is normal, 100% will completely invert the colors in your image.
Turn any image filter into a hover effect
Adding the text :hover after the element name for your image will apply this effect only when someone hovers over the image with their cursor. Try it out yourself using this colorful image of Gus, the coolest pineapple on the web!
The code used to make this happen looks like this: #block-123456:hover img {filter: grayscale(100%)}
