How to make a similar vertical gradient with transparency?

Question

css

Hello ! Actually, I came across an interesting header with such a background,

i.e. at the top there is a black strip with a small transparency, and then comes the same black color with a transparency of 50%. Actually a question how it is correct to implement it? I tried to do it in online gradient generators, but it doesn’t work at all (transparency does not work).
Thanks to all!
link to big picture link

Answer 1

So easy: jsfiddle.net/IonDen/s2s77wLk

<div class="bg">
    <div class="grad"></div>
</div>

.bg {
    position: relative;
    height: 100px;
    background: #f00;
}

.grad {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

Instead of a red background - any picture.

Answer 2

what does js and jquery have to do with it?
r - red
g - green
b - blue
a - alfa (opacity from 1 to 0) to
top - from bottom to top from the first (transparent) to the second (black)
color gradient

Answer 3

www.colorzilla.com/gradient-editor