Gradient: half color half transparant - css

Question

I have this line of code
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
As you can see its half grey half black. Is there a way to make the grey part of it transparant, so then it would be half transparant half black..
Thanks in advance,
Kevin

Answer 1

You can use rgba() to achieve this where the first 3 parameters are the color you want (in your case, 138, 138, 138) and the last parameter is the opacity (in your case this will be 0)
To give you an example, your code will turn into this:
background:linear-gradient(341deg, rgba(138,138,138,0) 0%, rgba(138,138,138,0) 31.9%, #000 32.1%, #000 100%);
In this fiddle you can see it in action
Hope this helps!

Answer 2

Try this
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
Check the result
.original {
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
.advice {
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
}
.original,
.advice,
.tree{
height: 400px;
width: 400px;
}
.tree {
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
}
<div class="tree"></div>
<div class="tree"><div class="original"></div></div>
<div class="tree"><div class="advice"></div></div>