Help with CSS code to change B/G Colour?


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. :slightly_frowning_face:

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)

Hi Craig

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 ! :slightly_smiling_face:

You’re welcome. I’m glad I could help.