Creating Shadows with CSS

If you're looking to add some visual flair and depth to the design of your Squarespace website, adding a box shadow effect is a great way to do it. With just a little bit of ustom code, you can make your website's elements stand out and look more dynamic!

To create a box shadow effect in CSS, you'll need to use the "box-shadow" property. Here is a breakdown of how to create this code.

The first part of this code - and any CSS code - is the selector. For this example, the selector is what you are adding the shadow to. The example code below uses the selector .sqs-block-button-element which is the “code name” for button blocks on a Squarespace website.

After the selector, you’ll have a property and value set up inside curly brackets.

The property is box-shadow and the value describes the size and color of the shadow.

The first number in this value is the horizontal offset - how far along the X axis will this shadow be compared to the main object, in this case the button. A value of -5px would make it 5 pixels to the left of the button, and a value of 10px would make it 10 pixels to the right of the button.

The second number is the vertical offset which works the same way, but this time on the Y axis - the vertical one. A value of -5px would make it 5 pixels to the above the button, and a value of 10px would make it 10 pixels below of the button.

The next number is the blur - you can set it to 0 so it’s a solid color, or change it up by increasing the size. 10px is pretty blurry, 50px will be super blurry. The value after that is optional - it’s called the spread. This can help blend your shadow even more, but to be honest, I rarely use it because my shadows are often used for a little depth but nothing to dramatic.

The last value is the color. You can use any color value you want; a websafe color name like blue, or a HEX color code. My favorite color value to use is an RGBA color so I can adjust the transparency, and see any content under the shadow like a background image or texture.

Here's an example of what the code looks like:

.sqs-block-button-element{

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);

}

In this example, .sqs-block-button-element is the selector you want to add the box shadow effect to. In Squarespace, that selector will apply this shadow to a button block. The "box-shadow" property is then used to specify the size and color of the shadow. In this case, the shadow is 0 pixels to the right and 2 pixels down from the element, with a blur radius of 5 pixels and an opacity of 25%.

And that’s honestly it - the basics of creating a box shadow! Whether you're looking to add a subtle touch of visual interest or make a bold statement, box shadow effects are a great way to do it. With the power of CSS, you can create custom shadows that perfectly complement your website's design and aesthetic. So why settle for a flat, two-dimensional look when you can add depth and dimension with just a few lines of code? I hope you loved this article and want to learn more about CSS! If you are brand new to custom code, check out my free class at insidethesquare.co/learn