Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Light Box Image Reference

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    Advanced use case

    Change the Light Box Image overlay

    It is possible to change the opacity of Light Box Image overlay when it is open by adding custom CSS. To implement this in your application, copy the CSS code below and add it to the theme.

    .pswp__bg {
        background-color: rgba(0, 0, 0, 0.8);
    .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
        background-color: rgba(0, 0, 0, 0);

    Add rounded corners to images inside Light Box Image Pattern

    To add rounded corners to images inside Light Box Image, add the following custom css to the theme.

    .lightbox-content-thumbnail img,
    .pswp__item img {
        border-radius: var(--border-radius-soft);

    • Was this article helpful?