📘 Aula 6 MD-2: Como Criar Degradê com CSS 📘

Introdução

🎨Bem-vindo à aula sobre degradês em CSS 🎨
Hoje você vai aprender como criar transições suaves entre cores, utilizando técnicas de linear-gradient e radial-gradient. Você verá exemplos práticos, dicas profissionais e exercícios para aplicar o degradê em fundos, banners e botões, deixando seus projetos mais modernos e atraentes.

Ao final desta aula, você será capaz de:

• Entender o conceito de degradê e suas aplicações visuais.

• Aplicar diferentes tipos de degradê usando cores, direções e múltiplos tons.

• Produzir designs com degradês equilibrados e profissionais.

1. O que é um degradê?

Um degradê é a transição suave entre duas ou mais cores. Ele é muito usado em **fundos, botões, banners e elementos gráficos** para dar profundidade e modernidade ao design.

Existem dois tipos principais de degradê em CSS:

• Linear: a transição ocorre em linha reta (horizontal, vertical ou diagonal).

• Radial: a transição ocorre a partir de um ponto central, como círculos concêntricos.

2. Sintaxe básica do linear-gradient

background: linear-gradient(to right, red, blue);

🔹 to right → direção do degradê (pode ser to left, to bottom, 45deg ou 90deg, etc). 🔹 Você pode usar cores em nome, HEX, RGB ou HSL.

3. Exemplos visuais de degradê

4. Dicas para criar degradês profissionais

• Escolha cores que harmonizem. Use ferramentas como Adobe Color ou Coolors.co.

• Evite transições com cores muito contrastantes se o objetivo é suavidade.

• Para degradês modernos, use HSL ou Lab em vez de RGB puro; eles dão transições mais naturais.

• Experimente três ou mais cores para degradês ricos, mas evite poluição visual.

• Use a direção do degradê para guiar o olhar do usuário (to right, to bottom, 45deg).

• Lembre-se do contraste: se o degradê for fundo de texto, teste legibilidade usando cores neutras ou semi-transparência.

5. Segredos de um degradê impactante

• Use cores da mesma família para suavidade ou cores opostas para impacto.

• Para botões e highlights, degradês diagonais ou radiais costumam dar mais dinamismo.

• Transições de tons escuros para claros podem criar profundidade e sensação de espaço.

• Não exagere em muitas cores diferentes; degrade simples (2-3 cores) costuma ser mais elegante.

• Combine degradês com sombras suaves e bordas arredondadas para um resultado profissional.

6. Exercício Prático

Crie um banner de fundo usando linear-gradient com três cores que representem energia e confiança.

• Escolha as cores (ex.: vermelho, laranja, amarelo ou azul, roxo, verde).

• Experimente diferentes direções (to right, to bottom, 45deg ou 90deg).

• Adicione bordas arredondadas para avaliar estética visual.

• Teste aplicando degradê em botões, cards e backgrounds de seção para ver o efeito em contexto real.

Exemplo visual sugerido:

🔹 Nesse exemplo, usamos um degradê horizontal vermelho → laranja → amarelo, com bordas arredondadas e texto centralizado para mostrar como o banner poderia ficar.