How to Add a Text Shadow Effect in Squarespace with CSS

Are you looking to add a little flair to your website text? A text-shadow effect can make your headings, body text, or call-to-action buttons pop, giving your site a modern and polished look. With a small bit of CSS, you can create eye-catching text shadows and fully customize them to match your design.

In this tutorial, I’ll walk you through how to add and adjust a text shadow effect in Squarespace, step by step.

Watch the video

Check out the YouTube video below. 👇🏼

Why Use Text Shadows?

Text shadows are a great way to:

• Enhance readability: Add contrast to make text stand out on busy backgrounds.

• Create depth: Give your site a more layered, 3D appearance.

• Add branding: Use shadow colors that align with your site’s palette.

Step-by-Step Guide to Adding Text Shadows

Step 1: Access the Custom CSS Editor

1. Log in to your Squarespace dashboard.

2. Navigate to Website > Pages > Website Tools > Custom CSS.

3. Open the Custom CSS editor. This is where you’ll paste the CSS code to apply the text-shadow.

Step 2: Add the CSS Code

Here’s a basic CSS snippet to create a text-shadow:

#block-id {

text-shadow: 2px 2px 4px #000000;

}

Explanation of the code:

• #block-id: Replace this with the ID of the block containing the text you want to style.

• 2px 2px: The horizontal and vertical offset of the shadow.

• 4px: The blur radius.

• #000000: The hex code for the color of the shadow (black in this example).

Step 3: Find the Block ID

To apply the text-shadow to a specific text block:

1. Install the Squarespace ID Finder Chrome Extension.

2. Open your page in the Squarespace editor.

3. Use the extension to identify the block ID of the text block you want to target.

4. Copy the block ID and paste it into the CSS code where it says #block-id.

Step 4: Customize the Text Shadow

Once the shadow appears, you can tweak its settings:

• Horizontal Offset (First Value): Positive numbers move the shadow right, negative numbers move it left.

• Vertical Offset (Second Value): Positive numbers move the shadow down, negative numbers move it up.

• Blur Radius (Third Value): Higher numbers create softer, blurrier shadows.

• Color: Replace the hex code with a different color or a color name like red or blue.

Step 5: Preview and Save

1. Save your CSS changes and preview your site.

2. Adjust the values to get the perfect look. Play around with:

   • No Blur: Set the blur radius to 0 for a sharper shadow.

   • Directional Shadows: Experiment with negative offsets to shift the shadow direction.

Pro Tips for Text Shadows

1. Use Subtle Effects: Avoid heavy shadows that overpower your text.

2. Match Your Brand: Use shadow colors from your site’s palette for consistency.

3. Test Readability: Ensure your text remains legible against all backgrounds.

Wrapping Up

Adding a text shadow effect in Squarespace is a quick and easy way to make your website more visually dynamic. With just a few lines of CSS, you can create unique and customizable text styles that enhance your site’s design.

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.