Degradê com CSS - Linear Gradients

Fazer degradês utilizando CSS aparenta ser algo complicado, sendo feito normalmente em geradores ou utilizando imagens. A utilização a funcionalidade linear-gradient, a criação de degradê no CSS fica muito mais simples (e leve)!

Sintaxe

De forma genérica, é assim que se monta um gradient:
background: linear-gradient(sentido/ângulo, cor1, cor2, ..., corN);
Não é necessário informar um sentido, pois por padrão, o valor da direção é to bottom (de cima para baixo).

Exemplos

background-image: linear-gradient(#92FFC0, #002661);
background-image: linear-gradient(to right, #F97794, #623AA2);
background-image: linear-gradient(to bottom right, #FFF6B7, #F6416C);
background-image: linear-gradient(to left, #FD6585, #FFAA85, #FD6E6A);

4 comentários, comente também!

  1. Nossa, é tão útil ♥ Porém eu não gosto muito no blog, prefiro em imagens, no photoshop, no efeito overlay. Haha.

    etcforme.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial^^

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  3. Anônimo2/12/13

    Já conhecia o Tutorial, mas mesmo assim é bastante últil ;3 Eu acho lindo quando tem algum blog usando degradê no blog, alguns ficam estranhos outros não. O degradê que foi usado aqui mesmo ficou lindo =^_^=

    Have-Things.Com!

    ResponderExcluir
  4. Amei <3

    Dá uma olhada depois? ><

    http://www.cupcakedcapas.blogspot.com

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...