I want to change the Linear Gradient B/G Overlay of a Slider on my Home Page Site.
Below is the CSS code:
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
How can i revise the code to change the B/G Overlay from Black to Grey ?
As you can see, the bottom gradient is too dark. Perhaps, a Grey shade will make the difference.
Not knowing code But just on a guess, change the 100% to something like 70% or 80%
RGBA 0/0/0/0 at 0% would be white (or ‘no color’ if that’s a gradient fade.). At 100% it would be black.
Thanks for your input.
Unfortunately, by reducing the % value, the Gradient is still the same colour & Gradient line has shifted upwards
In short, its looking much darker than previous.
It’s the #000 in the code that is the short form of #000000 for black, so just replace with a lighter color. You also may want to see about changing the first % (in this case 0%) which tells the first color in the gradient where to “begin” gradient. So, currently it is starting at 0% the very beginning. If you set it to 50% or some other percent the gradient will start later down.
I should know better. My only experience with RGBA is LED tape.
(backs out of room slowly)
Indeed the first % has done the trick !!
I changed it to 50% & retained the #000 ( Black colour).
The slider is looking much brighter.
I want to achieve the same gradient as the Slider below:
Any tips on how to get the exact same effect ?
Just play with the numbers. It is hard to say, it looks like it is a much “tighter” gradient. In this case I would change the second % to 75 or so and see if that helps.
Ok - the 2nd % isn’t working.
I’ve changed the 1st % from 50% to 30% & i’m very happy the final output.
Thanks Craig - you’ve been very helpful !
You’re welcome. I’m glad I could help.