Bring your Squarespace website to the next level with these easy to use effects!

In this article, I’ll walk through some effects you can add to your Squarespace website using custom CSS to create unique animations, and fun elements to your designs. The goal: Make your site feel more interactive, elevated, and editorial — not just a static page. Make sure to download your free code snippets at the bottom so you can easily plug and play into your own website.

1. Typewriter / Typed Text Effect

This is a great effect to add to your websites to create a subtle animation while having a call out of important information. Use this to highlight who you work with, fun facts about your business, or really any sort of text that you want to highlight!

How to add the typewriter effect

[Access the free code here before beginning]

• Within your current section, add a “Code Block” by selecting “Add Block” –> “Code Block”
• Double click to open up the code editor and paste in the code provided
• Make adjustments to the font family, font size, and speed (if needed)
• Scroll to the phrases, and replace each line with your own copy. Make sure that your copy is between the quotation marks
• Preview your text effect to make sure all text is fitting within the box and make adjustments as needed.
• Adjust your mobile text size within the code to ensure that your mobile typewriter effect fits within the mobile preview.

2. Liquid Glass / Frosted / Glassmorphism Overlays

This effect is commonly seen on tech and software websites, but can be utilized by anyone who is looking for a modern and clean design element. Use this to emphasize a text box, use as an overlay, or stack them for a layered look. The options are endless and it adds a really great visual element to any simple website.

How to add the typewriter effect

[Access the free code here before beginning]

There’s two ways to do this effect (one without code, and one with code) So I’ll go over how to do this effect without code first! Keep in mind that there are some limitations as covered in the video, but this is a good option if you don’t want to add code to your site for this effect.

Without Code:

• Add a shape block into your section by going to “Add Block” –> “Shape Block”
• Select the paint bucket icon (Style Background) and toggle “Background” on
• Choose a background color. Light grey/whites look best for a more realistic glass effect, but you can mess around with your color selection however you see fit.
• Toggle “Blur” on and adjust the blur amount

With Code:

• Add a shape block into your section by going to “Add Block” –> “Shape Block”
• Paste code into “Custom CSS” panel and using the Squarespace ID finder, select the BlockID of your shape block
• Adjust the blur amount within your CSS to create the look that you want

3. Custom Cursor

[Access the free code here before beginning]

Custom cursors are a fun way to add some personality and your own branding twist to your website, and the options are truly endless! This effect adds so much to a website, but is also really easy to do.

• Create your custom cursor icon in Canva (or any other design software) and make sure that your design is 32px x 32px
• Go into your custom CSS panel and paste in your code
• Click on “Custom Files” and upload your PNG
• Make sure cursor is selected in between the quotations and then click on your uploaded PNG to paste the URL into the line of code