Free Tool

Box Shadow Generator

Create beautiful, layered CSS box shadows for your Squarespace elements. Preview in real-time, pick from presets, and copy production-ready CSS or LESS variables.

Why this matters

Subtle shadows add depth and polish to any website. They make cards pop, sections feel layered, and elements look clickable. But getting the values right by hand is tedious. This tool lets you dial in the perfect shadow visually and copy the CSS.

Preview

Presets

Pro

Unlock shadow presets

Shadow Layers

Pro

Unlock multi-layer shadows

Layer 1

Inset

X Offset0px

Y Offset4px

Blur12px

Spread0px

Color

#000000

Opacity15%

Generated Code

CSS

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

LESS Variable

@shadow-custom: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

.your-element {
  box-shadow: @shadow-custom;
}

Squarespace Selectors

Apply your shadow to common Squarespace elements using these selectors in a Code Block or Custom CSS:

/* Content blocks */
.sqs-block {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

/* Summary / blog items */
.summary-item {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

/* Image blocks */
.sqs-block-image .design-layout-card {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.sqs-block-button-element {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

/* Product items */
.ProductItem {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

/* Cards & form blocks */
.sqs-block-form,
.sqs-block-newsletter {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}