Add Drop Shadow to Squarespace Image Blocks and Buttons

Add a customized drop shadow to any element on your Squarspace site by using the below code plugin. This plugin is set to include all images, list items, and header actions. You must manually exclude elements from having a drop shadow. To apply the drop shadow to selected elements only, replace the opening selectors with your block or section ID and delete the second half of the code.

Copy Code

/* Block Shadow */
.image-block,.sqs-block-image, .sqs-block-button-element, .list-item,.header-actions-action {
  -webkit-box-shadow: 10px 11px 58px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 11px 58px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 11px 58px -9px rgba(0, 0, 0, 0.75);
}


/* Remove shadow specifically from the unwanted blocks */
#BLOCK ID, #BLOCK ID{
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}