Creating shadows with custom CSS

How Shadow Codes Work

Adding shadows to elements on your site is one of the easiest ways to give them depth and make them look like they’re floating above the page. Whether you want a subtle drop shadow under a button or a dramatic layered effect around a section, CSS makes it simple with the box-shadow property.

With just one line of code, you can control the position, blur, spread, and color of a shadow. And if you’re feeling creative, you can even stack multiple shadows together for unique effects.

In this guide, we’ll cover the basics, show you how to layer shadows, explain the difference between box shadows, text shadows, and drop shadows, and point you toward free tools to help you generate your own codes.

How to create a shadow code

The CSS property box-shadow lets you add a shadow to almost any element. A shadow has up to four values you can adjust:
1. Horizontal offset (x-axis): Moves the shadow left (negative value) or right (positive value).
2. Vertical offset (y-axis): Moves the shadow up (negative value) or down (positive value).
3. Blur radius: How soft or sharp the shadow appears. Larger numbers = softer edges.
4. Spread radius (optional): Expands or contracts the size of the shadow.
Here’s a simple example that adds a gray shadow below a text block:

.sqs-block-html {
  box-shadow: 5px 15px 20px rgba(0,0,0,0.5);
}

FREE SHADOW CODE GENERATORS

Here are a few of my favorite free shadow code generators.

Custom Codey is trained to help you create gradient codes for Squarespace!

Pro Tips for Custom Shadows

Nesting Multiple Shadows

You’re not limited to just one shadow! You can separate shadows with commas to create layered effects. This creates a darker shadow bottom-right and a lighter “highlight” top-left, making the box look like it’s popping off the page.

box-shadow: 2px 2px 5px red, -2px -2px 5px yellow;

Text shadows & drop shadows are different

While a box shadow applies to the container (like a button, image, or content block) a text shadow similar property, but it only affects the letters. here is an example: for the heading 4 text type

h4 {text-shadow: 2px 2px 4px purple}

There is also another tye of shadow code - drop shadow - which is technically a filter that is ideal for shape blocks any PNG images that have transparent backgrounds.

.sqs-block-shape .sqs-shape {
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
}