🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS: Adicionar fundo com gradiente background: linear-gradient(...)

📝 Uso

Este template demonstra como usar a propriedade background: linear-gradient() no CSS para adicionar um fundo com gradiente.

📘 Explicação

O código CSS acima usa a propriedade background: linear-gradient() para criar um gradiente com duas cores. Você pode alterar livremente a direção e as cores do gradiente.

🔹 Código Parcial

Um fundo com gradiente foi aplicado.

<div class="demo-area">
  <p>Um fundo com gradiente foi aplicado.</p>
</div>

<style>
  .demo-area {
    height: 200px;
    text-align: center;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>

💻 Código Completo Funcional

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adicionar fundo com gradiente background: linear-gradient(...)</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      height: 200px;
      text-align: center;
      background: linear-gradient(to right, #ff7e5f, #feb47b);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>Um fundo com gradiente foi aplicado.</p>
  </div>
</body>
</html>
Copiado!

🌈 Técnicas práticas de design com gradiente

O uso de linear-gradient() como fundo é uma técnica eficaz para adicionar profundidade visual e dinamismo ao design moderno da web. Quando bem utilizado, pode melhorar significativamente a impressão geral do site.

🎨 Coordenação de cores

Além do gradiente laranja padrão (#ff7e5f para #feb47b), mudar a direção de to right para to bottom ou 45deg cria um visual completamente diferente. Cores análogas produzem um efeito mais suave, enquanto cores complementares criam uma aparência mais vibrante. Use ferramentas como o CSS Gradient Generator para encontrar combinações ideais.

✨ Técnicas avançadas de gradiente

Gradientes com múltiplas cores (linear-gradient(to right, red, yellow, green)) ou com pontos definidos (linear-gradient(to right, red 0%, yellow 50%, green 100%)) permitem expressões mais elaboradas. Gradientes com transparência, como rgba(255,255,255,0), são ótimos para sobrepor suavemente imagens.

📱 Dicas para design responsivo

Em dispositivos móveis, gradientes na vertical (to bottom) geralmente proporcionam uma aparência mais natural. Evite background-attachment: fixed para prevenir problemas de performance ao rolar a página. Para suporte ao modo escuro, ajuste as cores usando @media (prefers-color-scheme: dark).

Gradientes são ferramentas poderosas de design, mas o uso excessivo pode deixar o visual poluído. Use-os estrategicamente em áreas importantes, como cabeçalhos, e garanta bom contraste para manter a legibilidade dos textos.

Modelos Relacionados