Como criar e aplicar cores em degradê no blog (CSS)

Konnichiwaa fadinhas e elfos! Como estão? Separei esses dias para adicionar alguns detalhes no blog, eu achei linda a ideia de degrade, peguei as cores predominantes no blog e fiz um degrade para combinar! É super fácil de fazer, com apenas css, você pode aplicar em qualquer lugar! E então, let's go?

Existem vários tipos de gradientes, como a variação de direção das cores, temos a linear e a radial:

• Linear Gradients (para baixo/cima/esquerda/direita/diagonal)
• Radial Gradients (definidos pelo centro) 

 
Para adicionar um degradê vá em Layout, Editar HTML e escolha o lugar onde quer colocar uma background no estilo degradê.

Gradiente linear

  O exemplo a seguir mostra um degrade linear que começa no topo. Começa por rosa, fazendo a transição para bege:

.suaclasseaqui {
background: linear-gradient(Pink, PeachPuff); /* mude o nome da classe e as cores */}

 Esse abaixo, já é uma versão que a cor principal se concentra na direita mudando levemente de cor para a esquerda:

.suaclasseaqui {
background: linear-gradient(to right, Pink , PeachPuff); /* mude o nome da classe e as cores */}

Caso queira para a esquerda substitua o right por left.

 O exemplo abaixo, é um estilo que a cor principal se concentra na parte de baixo e sobe levemente para a direita, essa é a minha favorita, foi usada ali no perfil da sidebar:

.suaclasseaqui {
background: linear-gradient(to bottom right, Pink , PeachPuff); /* mude o nome da classe e as cores */}

Caso queira com transição para a esquerda substitua right por left, ou caso queira para cima, substitua bottom por top.

 Agora, mudando um pouco, também tem a versão mais colorida, que fica assim apenas adicionando mais cores dentro dos parenteses:

.suaclasseaqui {
background: ​linear-gradient(Pink, SkyBlue, Peachpuff); /* mude o nome da classe e as cores */}

Gradiente radial padrão

 Por ultimo, a versão RADIAL, com circulo, substituindo apenas o linear-gradient por radial-gradient:

.suaclasseaqui {
background: radial-gradient(Peachpuff, pink, skyblue);  /* mude o nome da classe e as cores */}

Como adicionar novas cores?

Consulte aqui o nome das cores para CSS:

https://www.w3schools.com/colors/colors_names.asp
Achou? Não esqueça de substituir no CSS dentro dos parenteses e divida com virgulas

Colinha de classes (blogger):

Fundo do blog: .body | Rodapé: .footer | Leia mais: .more-link ou .jump-link | Sidebar: .sidebar e etc, qualquer dúvida pesquise como personalizar, e em background adicione o degradê ensinado aqui! Simple não?

O que acharam da novidade do blog? Estou adicionando um pouquinho de degrade e agora estou editando as capas com ícones de categorias também! Espero que tenham gostado do post! Até mais! Redes Sociais do Sweet Magic: Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus