0

Gostaria de saber como posso fazer para que minha div fique com essa divisão de cores:

inserir a descrição da imagem aqui

Desde já agradeço.

1 Resposta 1

1

Você precisará usar CSS linear-gradient.

O linear-gradient

linear-gradient é uma funcionalidade das CSS3 para criar degrades entre 2 ou mais cores em linha.

Sendo assim você vai precisar usar o seguinte código para gerar este background na sua div

.gradientbg{
    background: #f6f5f4;
    background: -moz-linear-gradient(-45deg, #f6f5f4 0%, #f6f5f4 50%, #ffffff 51%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f6f5f4), color-stop(50%,#f6f5f4), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: -o-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: -ms-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: linear-gradient(135deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f5f4', endColorstr='#ffffff',GradientType=1 );
  border: 1px solid #000;
  height: 100px;
  width: 100%;
}
<div class="gradientbg"></div>

3
  • Muito Obrigado!!
    – Skyirn
    Commented 7/07/2015 às 14:24
  • Erlon, preciso aumentar o degrade do cinza um pouco mais para a direita, como posso fazer?
    – Skyirn
    Commented 7/07/2015 às 14:38
  • Use o Colorzilla, este aplicativo vai te ajudar muito a criar os efeitos visuais css que você precisar Commented 7/07/2015 às 15:36

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 .