How to Easily Add a Text Shadow Effect in Squarespace

Also called a “drop shadow,” this cool effect creates a shadow that is slightly offset and below an image, element, or text, creating the illusion that light is being applied to the item causing it to cast a shadow.

A drop shadow can also create a three-dimensional appearance of an element.

If you are trying to add text to your website that has a drop shadow or shadow effect, creating an image of text with a drop shadow and then uploading it to your website is not ideal.

Because you want your text to be searchable by search engines, you should create this effect directly to the text on your Squarespace website.

In this blog post, I explain how easy it is to add a text shadow effect, or “drop shadow,” using custom CSS.

You can follow my list of steps below the video or watch the tutorial below…it’s short!

I included shortcuts below for adding a drop shadow to additional text blocks that you won’t find in the video.

How to Add a Drop Shadow to Text Using Custom CSS

If you’ve used a drop shadow or shadow effect in other design elements for a particular product, service, event, etc., you may want your website text to align with that design theme.

Luckily, it is very easy to add a drop shadow or shadow effect in Squarespace using custom CSS.

Scroll down to learn how to do it.

Add Custom CSS

1. In your pages panel, scroll down to website tools > custom CSS

2. Copy the code snippet below and paste it into custom CSS

3. Using the Squarespace ID Finder Chrome extension, locate the block ID of the text block you want to add the drop shadow to and select it—it will automatically copy to your clipboard

4. Come back over to your code snippet, highlight #BLOCK-ID-GOES-HERE, and paste the block ID you just copied

5. If you want to change the color, highlight rgba(0,0,0,.6) and replace it with your hex code—don’t forget to include the “#” to your hex code or it won’t work

/* Add a dropshadow to a text block */

#BLOCK-ID-GOES-HERE  {

text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);

}

Shortcuts for Adding a Drop Shadow to Additional Text Blocks

If you want to use this same drop shadow or text shadow effect to other text blocks, all you have to do is add a comma after the block ID in the code snippet and copy and paste the block ID of the text block where you want to apply the same shadow effect.

You can do this for as many text blocks as you like, just add a comma in between each block ID.

If you want to add a drop shadow of a different color, you’ll have to copy, paste, and edit the code snippet above to reflect the different color, basically follow the same instructions as before.

Does that make sense?

Was this helpful?

Are you going to try this on your website? A client’s website? What will you use it for? Is there anything else you’d like to learn to do using custom CSS in Squarespace? Drop your comments below 👇

---

If you liked this post, you’ll LOVE these:​​

• Create a Color Gradient for a Line Block in Squarespace

• Change the Hamburger Button Color in Squarespace With CSS

• Create a ‘Mobile View Only’ Section in Squarespace

• How to Hide Blocks and Sections on Mobile in Squarespace

This page contains affiliate links

My Insta

@jenxwebdesign

Like this post?

Pin It to Pinterest 👇