Gradient: half color half transparant

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

replace the color which you want to be transparent with `transparent` — CodeRomeos, May 12 '16 at 07:08

score 4 · Accepted Answer · answered May 12 '16 at 07:14

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!

score 1 · Answer 2 · answered May 12 '16 at 07:28

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>

I love that you used an image in your example, since that's the main thing I'm trying to achieve on my website. this is very welcome thanks. — Kevin, May 12 '16 at 07:35
@KevinAartsen Thank you for your feedback. It inspires me to become better. — Gleb Kemarsky, May 13 '16 at 12:13

Gradient: half color half transparant

2 Answers2