4

Estou tentando aplicar um linear-gradient numa DIV mas não está aparecendo no navegador. Já testei no Opera, no Chrome, no Safari e no FireFox mas não aparece de jeito nenhum.

Meu CSS ficou assim:

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

Meu HTML está assim:

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

1 Resposta 1

4

Hoje em dia só é possível usar transparência no linear-gradient com rbga. Porem em breve isso será extendido a HEX também, juntando um parâmetro a seguir, também hexa-decimal, ou seja de valores 0-F.

Assim, a maneira possível é com rgba, onde o parâmetro transparência deve ter valores decimais entre 0 e 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .