# CSS tip - maintain tile color (remove darkening effect when overlaying text)

**URL:** <https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [October 4, 2021, 2:19pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640 "2021-10-04T14:19:21Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [October 4, 2021, 2:19pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/1 "2021-10-04T14:19:21Z")

</div>

I was searching the Community for this, then figured it out myself when I couldn’t find anyone else referring to it.

This CSS will remove the “graying” effect when you overlay text on top of a Tile. I’m using this because my tiles are basically just solid colors and I’d like to maintain the look even after adding text as an overlay. This also forces it to be black text, bolded.

```auto
<pre><span><style>
[data-test="tile-item"] .tile-overlay {background: none;}
[data-test="tile-item"] .tile-subtitle {color: black; font-weight: bold;}

```

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 23, 2021, 12:35pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/2 "2021-10-23T12:35:38Z")

</div>

It seems that this doesn’t play well with Safari/IOS…

I recently tried this in one of my apps, using essentially the same CSS:

```auto
<pre><span><style>
[data-test="tile-item"] .tile-overlay {
	background: none;
}
[data-test="tile-item"] .tile-subtitle {
  white-space: break-spaces;
  color: white;
  font-weight: bold;
}

```

In the builder and on Android devices, I see the expected result, which is:

 ![Screen Shot 2021-10-23 at 8.05.53 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c728404ceec3c4577c9931334dd2580db5a4eab.png)

But with Safari/IOS…

 ![WhatsApp Image 2021-10-23 at 8.03.59 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/d/5dc035c5f21580db738e8701e369036a2a2372fb.jpeg)

😱

Any CSS masters know how to fix this one?

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [October 23, 2021, 12:52pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/3 "2021-10-23T12:52:10Z")

</div>

I’ve been experiencing this myself with users on iPhone XR and 12. It would great to have a work around, otherwise I have to rebuild the screen ☹ thanks!

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [October 23, 2021, 1:06pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/4 "2021-10-23T13:06:02Z")

</div>

Great catch! Hoping there’s a workaround.

Also, it would be even better to have a native option to disable the dimming effect — it’s especially needed when tile images are simply a flat color and you’re trying to match other styling in the app.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 23, 2021, 1:10pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/5 "2021-10-23T13:10:42Z")

</div>

yup, that’s exactly what I’m trying to do

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 24, 2021, 10:42am UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/6 "2021-10-24T10:42:40Z")

</div>

So I managed to resolve this one, but to be honest I’m not really sure what the problem was.

After a bunch of testing different IOS versions and other trial and error (thanks @ThinhDinh for prodding me in different directions and providing some clues), I finally ended up (in desperation) changing the image that was being used with the tiles - and that immediately resolved it!

Originally I had a simple blank 300x100 image that I’d uploaded to Glide. I changed that to fetch an identical image dynamically from [dummyimage.com](http://dummyimage.com), and that did the trick.

I’m at a complete loss to explain that, but it’s working now and thats all I really care about 😂

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [October 24, 2021, 10:47am UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/7 "2021-10-24T10:47:01Z")

</div>

I need that trick right now too!!

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [October 24, 2021, 11:01am UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/8 "2021-10-24T11:01:03Z")

</div>

Interesting stuff! I’ll keep that in mind!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 24, 2021, 12:10pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/9 "2021-10-24T12:10:07Z")

</div>

Yeah as we talked to each other in the chat, this is strange behaviour. What did you use to generate the original image?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [October 24, 2021, 12:28pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/10 "2021-10-24T12:28:15Z")

</div>

To be honest, I don’t recall. It was done quite some months ago - I wouldn’t do it that way now - I suspect I just made a png myself using the Mac preview client.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 3, 2021, 12:14pm UTC](https://community.glideapps.com/t/css-tip-maintain-tile-color-remove-darkening-effect-when-overlaying-text/32640/11 "2021-11-03T12:14:52Z")

</div>

With Prince “Purple Rain” music and my lyrics:  
Chorus:  
“Purple tiles, purple tiles…  
(repeat…)  
Only want to see you designing these purple tiles !  
I know I know, it’s tough…”  
💜 purple, so…