Add a Retro Photo Effect to Squarespace with CSS

If you’ve ever tried to give your Squarespace images a retro or film‑inspired look, you probably processed every photo in a design tool first. That works, but it’s slow and not something most site owners want to deal with every time they upload an image. Below I’ll walk through my approach using CSS.

How I Approached the Style

For the demo, I built a simple bio page for a made up content strategist. The goal was to keep things cohesive and avoid having bright, super sharp photos fighting against the layout.

I used Figma only to figure out the general treatment before translating it into CSS. The look included:

• Noise
• A subtle layer blur
• Desaturation
• A soft radial gradient

What the Effect Actually Does

Before the effect, all the images were crisp and modern looking. Once the filters and overlays were applied, everything felt more cohesive and easier on the eyes. The nice part is that it works across:

• Image blocks
• Background images
• Background videos

So once the CSS is in place, you don’t have to do anything special to your images.

The CSS You Can Copy and Paste

Below is the exact CSS used in the video. You can add this to Pages > Custom Code > Custom CSS in Squarespace.

/*
  Grayscale and blur background videos,
  background images and image blocks
-------------------------------------*/

.sqs-video-background-native,
.section-background img,
.sqs-image-content img {
  filter: grayscale(50%) blur(1px);
}


/*
  Create blank content before and 
  after each element
-------------------------------------*/

.section-background:has(img)::before,
.section-background:has(img)::after,
.sqs-video-background-native::before,
.sqs-video-background-native::after,
.sqs-image-content::before,
.sqs-image-content::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 100%;
}

/*
  Create the radial gradient in the 
  "before" content
-------------------------------------*/

.section-background:has(img)::before,
.sqs-video-background-native::before,
.sqs-image-content::before {
  background: 
    radial-gradient(
      circle at 50% 50%,
      rgba(253, 236, 140, .4), 
      rgba(253, 114, 0, .4));
  z-index: 1;
}

/*
  Create the grain effect in the  
  "after" element
-------------------------------------*/

.section-background:has(img)::after,
.sqs-video-background-native::after,
.sqs-image-content::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 2;
  opacity: .2 !important;
}

If you want to encode your own SVG texture, I used this tool: https://yoksel.github.io/url-encoder/

Final Notes

Squarespace does offer a built in overlay effect, but I wanted something with a bit more control and more layers.

Feel free to tweak the values or experiment with your own gradients and textures. If you have ideas you want me to explore, drop them in the comments.

Watch the Video