Criar Degradê usando CSS (linear-gradient)

Entre os blogs da blogsfera, é comum encontrar diversas pessoas utilizando degradê em seus projetos. Fazer degradês utilizando CSS aparenta ser algo complicado, sendo feito normalmente em geradores ou utilizando imagens.
A utilização a funcionabilidade linear-gradient, a criação de degradê no CSS fica muito mais simples (e leve)!
Aprenda como criá-lo seguindo os passos a seguir.

A forma genérica de um atributo linear-gradient é a seguinte
background-image: linear-gradient(sentido/ângulo, cor1, cor2, ..., corN);
Sentido/ângulo To top, to bottom, to left, to right, 45deg, 180deg...
Cor #000, black, rgb(0,0,0)...

Horizontal

Vertical

Inclinado

Três Cores

Créditos: x
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

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. 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...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO