Transparent Gradient Effect on Background Image
Share this post:
Enjoy this Post?You'll love our newsletter!
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.
Check out how I use this effect in the source code .