Custom CSS Code Blur Form Lightbox Background

Hi,

I would like to have the frosted-glass blurry transparency I have on my site's header implemented elsewhere. I've been trying to get this to work on the Form Lightbox, but nothing seems to work for me.

Ideally, the user would hit "Feedback Form", Lightbox appears, and the rest of the site in the background blurs beautifully.

OR if it's not too crazy... to have the Lightbox appear, and the Lightbox itself is blurred, like the Lightbox is acting as a pane of frosted glass.

You can see the page I'm on about here: https://oddness.studio/wrap-1

I suck at CSS and struggling to figure it out. Anyone with suggestions will have my heart.

Try adding to Design > Custom CSS or Website > Website Tools > Custom CSS

.sqs-modal-lightbox-content .lightbox-background {
    filter: blur(5px) !important;
    opacity: 0.7 !important;
}

Hi,

Thank you so much for helping me out with this! Unfortunately, I added the code and haven't seen a difference.

Any ideas?

@oddness Try this code:

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

I think white text color inside your feedback form would look much better. Here's a code snippet to change the text color inside your feedback form to white.

.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper {
	color: #fff !important;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .lightbox-close  {
	color: #fff !important;
}
.sqs-modal-lightbox .sqs-modal-lightbox-content .sqs-button-element--primary {
	color: #fff !important;
	padding-left: 0 !important;
}

Let me know how it goes. Thanks! 

This worked Beautifully.

However I noticed that the mobile version looks like this? 😞

Any ideas on how to fix this??