# Styling Cover Images with a Fade

**URL:** <https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690>\
**Category:** Ask for Help\
**Created:** [March 22, 2020, 5:50pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690 "2020-03-22T17:50:56Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 5:50pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/1 "2020-03-22T17:50:56Z")

</div>

I have a cover image for a page, with these settings -

 ![Screenshot 2020-03-22 at 17.48.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/c61d113032d88b169c0c18fb5aa7d06a99990d68.png)

I can’t figure out how to add the fade that’s shown at the bottom of [this](https://twitter.com/ionamath/status/1230169260175101953/photo/3) image, can anyone help?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 22, 2020, 6:07pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/2 "2020-03-22T18:07:30Z")

</div>

That fade is added automatically when you use a title component, not an image component.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 22, 2020, 6:21pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/3 "2020-03-22T18:21:07Z")

</div>

Tiles also have a text overly fade, but the Title is probably easier for what you are doing.

---

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 6:47pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/4 "2020-03-22T18:47:39Z")

</div>

@Robert_Petitto @Jeff_Hager thanks! The page already has a title because it’s a tab so I had tried using the title component but the fade only appears if there’s visible text.

So it seems like I need a way to apply the fade without text being there, is that possible?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 22, 2020, 6:50pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/5 "2020-03-22T18:50:00Z")

</div>

Photoshop

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 22, 2020, 6:50pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/6 "2020-03-22T18:50:06Z")

</div>

Use a space for the text

---

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 6:50pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/7 "2020-03-22T18:50:11Z")

</div>

Ha! Fair.

---

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 6:52pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/8 "2020-03-22T18:52:42Z")

</div>

Nice idea but that doesn’t seem to work sadly.

---

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 7:24pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/9 "2020-03-22T19:24:03Z")

</div>

Since I’m guessing there’ll be people here who aren’t designers, I figured I’d share how I did this.

I used Sketch rather than Photoshop to make the edits - it’s got pretty similar functionality for this sort of thing.

The space between the two dots here is the area that the gradient fill’s applied to. You can drag the dots to adjust the area.

 ![Screenshot 2020-03-22 at 19.16.14](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/9/9939144c320b69d6cf3d60c8ef56824dd2ff1e92.jpeg)

The screenshot on the left is the primary colour of the background. Nothing’s changed here as I want to fade from that colour to black. The screenshot on the right is the colour that I’m fading to - basically black. You could move the horizontal slider just about the colour hex to decrease the density of the fade but this looks best to me.

 ![Screenshot 2020-03-22 at 19.15.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/9/9bd4ccbb495e9372693187050aed2fb90a49a834.png) ![Screenshot 2020-03-22 at 19.15.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/f/f02e29589f1cd2cd8802aab6d6310d85a52e4686.png)

The good news is, I’m not a designer either. All you really need is a decent tool like Sketch and some time experimenting to figure this sort of thing out.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 22, 2020, 8:11pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/10 "2020-03-22T20:11:48Z")

</div>

Got it. It doesn’t look like anything is here, but copy what’s between the quotes to a cell and make it the title: "⁪ ⁫ ⁬ "

Result:

 ![Screen Shot 2020-03-22 at 4.11.10 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1ac5a443b16abb413ca9f3c64b640212cab6dc68.png)

---

<div class="post-metadata">

**Author:** ![spencersRus](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/spencersrus/32/69_2.png) [@spencersRus](https://community.glideapps.com/u/spencersRus)\
**Post date:** [March 22, 2020, 8:38pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/11 "2020-03-22T20:38:01Z")

</div>

Can cloudinary be used here.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 22, 2020, 8:43pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/12 "2020-03-22T20:43:25Z")

</div>

Probably…speaking of cloudinary…sneak peak of my next project:

 ![Screenshot_3_22_20__4_43_PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/0/007ad42dae975969c621a5283e154a436b34b13a.png)

---

<div class="post-metadata">

**Author:** ![alexs](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexs/32/4516_2.png) [@alexs](https://community.glideapps.com/u/alexs)\
**Post date:** [March 22, 2020, 9:03pm UTC](https://community.glideapps.com/t/styling-cover-images-with-a-fade/5690/13 "2020-03-22T21:03:55Z")

</div>

> [@Robert\_Petitto](#):
>
> ⁫ ⁬

That worked! A little bit too well for my artwork so I’ll stick with what I created actually 😅 But thanks.
