Blur gradient effect background image
I want to know if it's possible to achieve this effect: https://rerollcdn.com/GENSHIN/Backgrounds/genshin-bg.jpg
Basically a blur and/or color blend gradient that comes from the bottom of the image.
On the live version: https://myntsu.github.io/WC-Guide/ I'm only able to achieve the opacity/color tune down.
Tried searching on the internet alternatives to do this, but no luck so far.
The image is a
background-image inside main, and it has a layout on top adding this blue cover with an opacity in it.
10 Replies
For the record, I know this can be achieved using image editing tools, but I want to know if there's a HTML/CSS/JS alternative to this.
From the samples I've seen online, some were pretty close, but none of them worked for me.
I know that with
background-image you can specify a comma-delimitated list of images or gradients. So a linear gradient using rgba() as the colour stops should be able to get you the right colouration with a change in alpha channel to adjust how much of the image underneath shows.
Also, per MDN, the browser draws them in "reverse" order, so the first item is stacked on the "top" of the stack, the second item beneath that, etc. So put the gradient first and the image second.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-imageOh god, it was that easy?
I feel so stupid 
Don't feel stupid for not knowing. Feel smarter for learning!
To be fair, I did spend a few minutes on MDN making sure I knew what I was talking about
As Kevin said in his latest short: you only see the final result and not the head-bashing that went into getting the answer:
https://youtube.com/shorts/V55p205fI6I?feature=share
Kevin Powell
YouTube
No one writes perfect code on the first try
Come hang out with other dev's in my Discord Community
š¬ https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
ā https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
šŗ https://www.twitch.tv/kevinpowellcss
---
Help support my channel
šØāš Get a course: https://www.kevinpowell.co/co...
Don't worry, I'm not discouraged by it.
š
thanks for the help!You have some of the cutest emojis! I'm a bit jelly
like them as 