Background degrade com CSS

Um desejo antigo de desenvolvedores e designers web era trabalhar com degradês sem precisar de utilizar imagens. Agora é possível utilizar esse efeito, contudo os navegadores ainda utilizam funções proprietárias – ou seja, não é um atributo oficial CSS, então, por via das dúvidas, nunca se esqueça de setar também uma background-color intermediária em seu documento, okay?

Para um exemplo simples, que vai do preto (#000000) ao branco (#ffffff) ser interpretado da mesma maneira no IE, Mozilla, Safari e Chrome, utilizaríamos o código abaixo:

.fundo-degrade{

background-color: #000;

/* IE */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff)";

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff);

/* Mozilla */

background: -moz-linear-gradient(top, #000, #fff) repeat-X;

/* Safari, Google Chrome */

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) repeat-X;

}

 

O exemplo acima é do degradê básico. Se você quer outros efeitos degradê, uma boa ferramenta online é o Ultimate CSS Gradiente Generator, aonde você escolhe o estilo de gradiente que mais lhe agrada, personaliza com as cores desejadas e aí e só copiar e colar o código CSS gerado em sua folha de estilos!

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

2 Comentários

  • Responder março 2, 2012

    Evelyn Jacovani

    Amei!! Vou tentar

  • Responder março 12, 2012

    @adriells

    No IE8 somente funcionou assim:

    /* IE */
    -ms-filter:”progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#ffffff)”;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#ffffff);

    #ficadica

// Siga as boas práticas: Comente!