Styling Cover Images with a Fade

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

I can’t figure out how to add the fade that’s shown at the bottom of this image, can anyone help?

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

1 Like

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

1 Like

@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?

Photoshop

1 Like

Use a space for the text

2 Likes

Ha! Fair.

1 Like

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

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.

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.

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.

1 Like

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:

1 Like

Can cloudinary be used here.

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

2 Likes

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

1 Like