How to code this "fade gradient" on image bottom?
I always saw this on popular websites but don't know how to achieve it.
4 Replies
There are several ways to achieve this but basically you need to add a pseudo element to the image container, and give it a linear gradient background , bottom to top, that goes from from black (or whatever color you want) to transparent.
Alternatively you could add the pseudo element to the text element.
no need for a pseudo element if you use the text element, you can just set the background on there directly
Yes, there are several methods 😀
I would use a pseudo element to ensure that the gradient was the same in all the cards as the number of lines of text might be different in each one which could cause them to be different.
I'd probably use a background gradient for that exact reason, so that the text was legible on a similar colored background no matter if it was one or two lines 😄