askvity

How to Add a Text Shadow in Squarespace Using Custom CSS

Published in Squarespace Customization 4 mins read

Adding a shadow to text in Squarespace typically involves using custom CSS code within your site's settings. This method gives you control over the shadow's appearance, including its color (using a hex code) and position.

To add a text shadow effect to your Squarespace website, you will need to access the Custom CSS editor and insert specific code. This process utilizes the text-shadow CSS property.

Understanding the text-shadow Property

The text-shadow CSS property allows you to add shadows to text. It takes several values, usually in this order:

  1. Horizontal Offset: The distance the shadow is cast horizontally from the text. Positive values move the shadow right, negative values move it left.
  2. Vertical Offset: The distance the shadow is cast vertically from the text. Positive values move the shadow down, negative values move it up.
  3. Blur Radius (Optional): The blur effect applied to the shadow. A value of 0 creates a sharp shadow. Larger values create a more diffused shadow.
  4. Color: The color of the shadow. This can be specified using color names (like black), RGB, RGBA, HSL, HSLA, or a hexadecimal code (like #000000 for black).

As mentioned in the provided reference, you will paste your hex code right here, remembering the number sign (#) before it to define the shadow's color.

Steps to Add Text Shadow

Here are the steps to implement a text shadow:

  1. Access Custom CSS: Log in to your Squarespace site. Navigate to Settings > Advanced > Custom CSS.

  2. Identify the Text: Determine which text elements you want to add a shadow to. This could be headings (like h1, h2, h3), paragraphs (p), or text within specific blocks. You might need to inspect your site's code to find the correct CSS selector for the exact text you want to target.

  3. Write the CSS Code: Enter the CSS rule into the Custom CSS editor. A basic rule includes the selector for the text element and the text-shadow property.

    • Example: To add a subtle dark grey shadow to all h2 headings:

      h2 {
  text-shadow: 2px 2px 4px #333333;
}

    • In this example:

      • h2 is the selector (targets all h2 headings).
      • text-shadow: is the property.
      • 2px is the horizontal offset (shadow is 2 pixels to the right).
      • 2px is the vertical offset (shadow is 2 pixels down).
      • 4px is the blur radius (the shadow is slightly blurred).
      • #333333 is the hex code for the shadow color (a dark grey).

  4. Paste Your Hex Code: If you have a specific color in mind, find its hex code. As the reference notes, you'll paste this code after the blur radius value in the text-shadow property, ensuring you include the # symbol before the code.

  5. Adjust Values: Experiment with the offset and blur radius values (2px 2px 4px in the example) and the hex code (#333333) until the shadow looks exactly as you want it.

  6. Save Changes: Click Save at the top of the Custom CSS editor.

Targeting Specific Text

If you only want to add a shadow to specific text rather than all instances of a certain element type (like all h2s), you'll need a more specific CSS selector. This often involves inspecting the page using your browser's developer tools to find a unique class or ID associated with the text container.

For example, if your text is inside a block with a class named special-text-block, your CSS might look like this:

.special-text-block p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Example using RGBA for semi-transparent black */
}

Using RGBA (rgba(0, 0, 0, 0.5)) is another way to define color, allowing you to add transparency (the 0.5 value). This is often preferred for shadows to prevent them from being too harsh.

Customization Options

You can add multiple shadows to text by separating them with commas.

  • Example:

    h1 {
  text-shadow:
    2px 2px #ff0000,  /* Red shadow */
    4px 4px #0000ff;  /* Blue shadow */
}

Adding a text shadow provides a simple yet effective way to make titles and important text stand out on your Squarespace site, enhancing its visual appeal.

Related Articles