How to create text outline effect in Squarespace

1. Add this code to CSS

  • Create a new CSS block: In your Squarespace website's custom CSS editor, create a new CSS block.

  • Paste the code: Paste the provided CSS code into the block.


// WWW.SQUARESPELL.CO.UK //
#BLOCK-CODE
h2 {color: transparent !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;}

#BLOCK-CODE
h2:hover {color: #000 !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;}
// WWW.SQUARESPELL.CO.UK //

Explanation:

  • Selectors: h1, h2, h3, h4, target all heading elements from level 1 to 6.

  • Property: outline adds a visible border around the selected elements.

  • Value: 1px solid #000 sets the outline to be 1 pixel thick, solid, and black. You can customize the color, thickness, and style (e.g., dotted, dashed) to suit your preferences.

Customization:

  • Color: Change #000 to any desired color (e.g., #333 for a darker gray).

  • Thickness: Adjust the 1px value to change the outline thickness.

  • Style: Experiment with different outline styles like dotted, dashed, or double.

  • Target specific headings: If you only want to apply the outline to certain heading levels, adjust the selectors accordingly (e.g., h2, h3 for only level 2 and 3 headings).

NOTE: This CSS code provides a basic outline style. You may need to adjust it further to fit your specific website design and requirements.

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!