Add A Drop Shadow To Your Lightbox Form

This week we are working with lightbox forms. A cool feature in Squarespace for contact forms and opt-ins, you can turn any standard form into a clickable button that opens what is called a lightbox; featuring a pop-up style of your full form over the rest of your on page content.

Squarespace automatically puts a darker tint over the rest of your website to bring that lightbox into focus, but thanks to CSS, you can make it really stand out!

This weeks tutorial shows you how to add a drop shadow to that lightbox, and shows you how to change the color of that tint behind it, so you can add some branding pizzazz or make things a bit clearer. 

Check out the tutorial video below, and when you are ready, grab the codes underneath the video to try it on your own site!

Lightbox Dropshadow: You can change the HEX color code (#000000) to any color shadow you want to see, and adjust the pixels (5px 5px 8px 2px) to change the shape and direction of the shadow itself.

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {box-shadow: 5px 5px 8px 2px #000000}

Background Color: You can change the HEX color code (#000000) to any color you want to see as an overlay of your website content, and adjust the opacity (.4) to change how translucent that color is.

.sqs-modal-lightbox-content .lightbox-background {

background: #000000!important;

opacity: .4!important; }

Ready for more?

I post a new Squarespace CSS tutorial every week! To get on my email list, sign up below: