Gradientes em CSS: Guia Completo

Os gradientes permitem criar transições suaves entre cores. No CSS, você pode aplicar gradientes como plano de fundo usando as funções linear-gradient() e radial-gradient().

Tipos de Gradientes

1. Gradiente Linear (linear-gradient())

Cria uma transição em linha reta.

Sintaxe:

background-image: linear-gradient(direção, cor1, cor2, ..., corN);  
    

Direções:

• Por ângulo: 90deg (esquerda para direita), 45deg (diagonal).
• Por palavras-chave:
  • to top (de baixo para cima).
  • to right (da esquerda para a direita).
  • to bottom right (diagonal superior esquerda para inferior direita).

Exemplo:

div {  
      background-image: linear-gradient(45deg, red, yellow);  
    }  
    

2. Gradiente Radial (radial-gradient())

Cria uma transição circular ou elíptica.

Sintaxe:

background-image: radial-gradient(formato tamanho posição, cor1, cor2, ..., corN);  
    

Parâmetros:

• Formato: circle (círculo) ou ellipse (padrão, elipse).
• Tamanho: farthest-corner (preenche o elemento) ou 200px (tamanho fixo).
• Posição: center (padrão), top left, etc.

Exemplo:

div {  
      background-image: radial-gradient(circle, red, yellow);  
    }  
    

Controlando a Distribuição das Cores

Use porcentagens após as cores para definir onde cada uma começa/termina:

div {  
      background-image: linear-gradient(to right, red 20%, yellow 80%);  
    }  
    

• red 20%: Vermelho ocupa 20% do espaço antes de começar a transição.
• yellow 80%: Amarelo termina aos 80%, criando uma zona sólida após esse ponto.

Altura do Elemento

Gradientes só são visíveis se o elemento tiver altura definida:

div {  
      height: 200px; /* Altura fixa */  
      /* ou */  
      min-height: 100vh; /* Altura mínima da tela */  
    }  
    

Exemplos Avançados

1. Gradiente com Múltiplas Cores

div {  
      background-image: linear-gradient(  
        to right,  
        red,  
        orange 30%,  
        yellow 60%,  
        green  
      );  
    }  
    

2. Gradiente Radial com Posição Customizada

div {  
      background-image: radial-gradient(  
        circle at top left, /* Centro no canto superior esquerdo */  
        red,  
        yellow 70%  
      );  
    }  
    

Dicas Práticas

1. Use Ferramentas Visuais:

   • CSS Gradient Generator para criar gradientes rapidamente.
   • Adobe Color para paletas harmoniosas.

2. Transparência:
   Use rgba() para cores translúcidas:

   background-image: linear-gradient(to bottom, rgba(255,0,0,0.5), rgba(0,0,255,0.5));  
       

3. div {  
         background-image: repeating-linear-gradient(  
           45deg,  
           red,  
           red 10px,  
           blue 10px,  
           blue 20px  
         );  
       }