Transparent Gradient Effect on Background Image

26. April 2019
1 Minute Lesezeit
Beitrag teilen:
Gefällt dir der Beitrag?
Du wirst den Newsletter lieben!

I built a new neat feature on my blog posts detail page that displays check constraints in the constructor instead of bean validation as a background image in the top of the rendered page. The trick to get the transparent fading effect via css is using a linear-gradient on top of the actual image.

It’s important to state that the linear-gradient effect is applied to the whole size of the block. So The block must have the exact same size as the background image to produce this effect. Check out the snippet below to get an idea how to do that.

See the Pen Background Image Fade Effect by Marcus Held (@Plumpy) on CodePen.


Check out how I use this effect in the source code .

Kennst du schon Marcus' Backend Newsletter?

Neue Ideen. 2x pro Woche!