How to change the design of a Webflow lightbox?

Lightboxes in Webflow are very useful, but it is "impossible" natively to customize their designs. Discover in this tutorial how to change the default design of a lightbox in Webflow with a little CSS code.

For the tutorial, we will change the overlay used in background-color and change it from a transparent black, to a white background with a blurred effect.

Customize a Lightbox in a few steps

1. Find the class you want to modify

To easily identify the CSS class you want to modify ;

1. Open your lightbox on a published webflow project (online, even on a webflow.io version)
2. Open the "inspect" option of your browser(cmd + option + I on mac)
3. Find the name of the CSS class you are targeting

2. Add an embed code

Add (as high as possible) in your browser an Embed Code Webflow element

3. Define new CSS styles to the targeted CSS class Lightbox

Then, integrate in this embed code the new styles you want to define to your Webflow lightbox. For the example, we want to change the background color of the lightbox, so we change the values defined to the CSS class . w-lightbox-backdrop (created by default by Webflow).

Sample code:

<style>
.w-lightbox-backdrop {
  background: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(10px);
}
</style>

⚠️ To be sure that the value has priority, and is taken into account by browsers, it is important to add at the end of your CSS styles the value "!important;". This "forces" the passage of this CSS configuration for your webflow lightbox.