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.
Use AI to summarize this article
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

Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP
ChatGPT 5.0 OpenAI
News
AI

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025
Screenshot showing two versions of Ramify’s homepage. The background version features a man standing in an office with the text “Vivez l’expérience banque privée, autrement”. The foreground version displays a cleaner layout with the message “Votre patrimoine, notre expertise”.
Documentation

How we helped Ramify increase its Conversion Rate with an A/B Testing Strategy using Optibase

How we helped Ramify increase its Conversion Rate with an A/B Testing Strategy using Optibase

Want to turn your website into your most valuable asset?

Contact us today