Linear-gradient does not appear in CSS3

Asked

Viewed 151 times

4

I am trying to apply a linear-gradient to a DIV but it is not appearing in the browser. I have tested in 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 is like this:

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

1 answer

4


Nowadays it is only possible to use transparency in linear-gradient with rbga. However soon this will be extended to HEX as well, adding a parameter to the following, also hexadecimal, i.e. 0-F.

Thus, the possible way is with rgba, where the transparency parameter should 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>

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.