In this tutorial, I am going to show you how to add a shadow to any text style in Squarespace with some clever CSS code!

A few key things to note before we dig in:

→ Shadows can be combined with a comma, and read as follows: text-shadow: (horizontal offset) (vertical offset) (blur radius - optional) (color)

→ You can use any color type including HEX, HSL, RGBA, or websafe color name. To learn more about those options, visit https://insidethesquare.co/colors

Here are some fun code examples from the video for you to try!

Color Glitch

{color: rgba(200,200,200,0.9); text-shadow:1px 1px #555, -0.05em 0 rgba(255,0,0,.85), -1px -1px #FFF, 0.05em -0 rgba(0,255,255,.85)}

Layered Shadows

{text-shadow: -2px -2px #ffc6ae, 2px 2px #ffc6ae, -2px 2px #ffc6ae, 2px -2px #ffc6ae, 5px 5px #ffece4, 8px 8px #ffc6ae, 13px 13px #f69477; color:#FFF}

Inset Text

{color:#eee; text-shadow: 1px 1px #111, 2px 2px 2px #ddd, 1px -1px #111, -1px -1px #111, -2px -2px 2px #ddd }

Colorful Outline

{text-shadow: 2px 2px red, -2px -2px blue, 2px -2px green, -2px 2px purple; color: #FFF}