# Unwanted background behind chat widget

**URL:** <https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258>\
**Category:** Tickets & Conversations\
**Tags:** chat\
**Created:** [July 19, 2022, 3:54pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258 "2022-07-19T15:54:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![madesimplemedia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/madesimplemedia/32/91715_2.png) [@madesimplemedia](https://community.hubspot.com/u/madesimplemedia)\
**Post date:** [July 19, 2022, 3:54pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/1 "2022-07-19T15:54:37Z")

</div>

Hi

There is an unwanted background behind the chat widget on our website. It is light grey, please see the attached screenshot, where I have highlighted it with a red border:

 ![madesimplemedia_0-1658245884773.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/4/044f657766d29a5ef8bda771f7479bda52cc4f9e.png)

I have added this CSS I found:

.shadow-container {

visibility: hidden !important;

}

But that doesn’t seem to have worked.

You can view the site here to see the issue:

> **[Home](https://www.madesimplemedia.co.uk/)**
>
> We are an experienced, friendly and reliable website design & marketing agency. For over 5 years, we have helped make digital simple for our happy clients.

Any idea how to remove that please?

---

<div class="post-metadata">

**Author:** ![TitiCuisset](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@TitiCuisset](https://community.hubspot.com/u/TitiCuisset)\
**Post date:** [July 20, 2022, 9:58am UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/2 "2022-07-20T09:58:36Z")

</div>

Hi @madesimplemedia

Thank you for the link and the details - I can see that as well

I want to tag some of our experts here - @LMeert @Teun do you see what can be happening here?

Thank you!

Best

Tiphaine

---

<div class="post-metadata">

**Author:** ![LMeert](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lmeert/32/103847_2.png) [@LMeert](https://community.hubspot.com/u/LMeert)\
**Post date:** [July 20, 2022, 1:12pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/3 "2022-07-20T13:12:39Z")

</div>

Hi @madesimplemedia, (hello [@TitiCuisset](https://community.hubspot.com/t5/user/viewprofilepage/user-id/89150)),

Your problem is the color-scheme property on the root of your document.

An easy fix (while leaving the rest of the website untouched) is to add {color-scheme: light;} to the div containing the chat iframe.

This will do :

```lia-code-sample
#hubspot-messages-iframe-container {
 color-scheme : light;
}

```

Hope this helps !  
If it does, please consider marking this answer as a solution 🙂

Best,

Ludwig

---

<div class="post-metadata">

**Author:** ![madesimplemedia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/madesimplemedia/32/91715_2.png) [@madesimplemedia](https://community.hubspot.com/u/madesimplemedia)\
**Post date:** [July 20, 2022, 1:21pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/4 "2022-07-20T13:21:58Z")

</div>

Thanks Ludwig that was it! Really appreciate your help.

---

<div class="post-metadata">

**Author:** ![Tanuki](https://avatars.discourse-cdn.com/v4/letter/t/c57346/32.png) [@Tanuki](https://community.hubspot.com/u/Tanuki)\
**Post date:** [March 30, 2023, 9:30pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/5 "2023-03-30T21:30:16Z")

</div>

Thank you for posting this!!! I had the same problem - it was driving me crazy…

---

<div class="post-metadata">

**Author:** ![Ranjeet\_Techimo](https://avatars.discourse-cdn.com/v4/letter/r/71c47a/32.png) [@Ranjeet\_Techimo](https://community.hubspot.com/u/Ranjeet_Techimo)\
**Post date:** [May 18, 2025, 7:33pm UTC](https://community.hubspot.com/t/unwanted-background-behind-chat-widget/61258/6 "2025-05-18T19:33:55Z")

</div>

Additionally, you need to add this rule to hide any shadow container that might be contributing to the issue.