How to Change the Design of a Webflow Lightbox?

Tutorial
March 20, 2023
3 min
Preview of an embedded HTML code on Webflow with a modification of the CSS class of a lightbox.
Key points

Lightboxes in Webflow are very convenient, but it is "impossible" to customize their designs natively. In this tutorial, discover how to change the default design of a lightbox in Webflow using a bit of CSS code.

For this tutorial, we will modify the overlay used as the background color, changing it from a transparent black to a white background with a blur effect.

Customize a Lightbox in Just a Few Steps

1. Find the class you want to modify

To easily identify the CSS class you want to change;

  1. Open your lightbox on a published Webflow project (online, even on a webflow.io version)
  2. Open your browser's "inspect" option (cmd + option + I on Mac)
  3. Find the name of the targeted CSS class
Inspecting CSS code of a Webflow site on Google Chrome

2. Add an embed code

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

Adding an Embed Code element on Webflow

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

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

Example code:

<style>
.w-lightbox-backdrop {
  background: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(10px);
}
</style>
Changing the background color and adding a CSS blur effect
Changing the background color and adding a blur effect

⚠️ To ensure that the values are prioritized and recognized by the browsers, it is important to add the "!important;" declaration at the end of your CSS styles. This "forces" the application of these CSS settings for your Webflow lightbox.

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today