Linear-gradient does not appear in CSS3

Question

Linear-gradient does not appear in CSS3

Navigation

#1 by (4 votes)

4

I'm trying to apply a linear-gradient to a DIV but it's not appearing in the browser. I've tested Opera, Chrome, Safari and FireFox but it does not appear at all.

My CSS looks like this:

.circular-progress{
    width: 12rem; 
    height: 12rem; 
    border-radius: 50%; 
    margin: auto; 
    background: linear-gradient(#666 50%, rgba(#666,.2) 50%);
}

My HTML looks like this:

<div class="circular-progress"></div>

css3

asked by anonymous 06.10.2017 / 12:52

1 answer

How does it work to use a vector of type struct? (C ++) Convert JSON to EXCEL

score 4 · Accepted Answer

Today it is only possible to use transparency in linear-gradient with rbga . But this will soon be extended to HEX too by adding a following parameter, also hex-decimal, that is, 0-F values.

So, the possible way is with rgba, where the transparency parameter must have decimal values between 0 and 1:

.circular-progress {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  margin: auto;
  background: linear-gradient(rgba(102, 102, 102, .5), rgba(102, 102, 102, .2));
}

<div class="circular-progress"></div>