Função CSS linear-gradient()

Definição e uso

CSS linear-gradient() A função é usada para criar um gradiente linear como fundo.

Para criar um gradiente linear, é necessário definir pelo menos dois marcadores de cor. O marcador de cor é a cor que você deseja que haja uma transição suave entre elas. Você também pode definir o ponto de partida e a direção (ou ângulo) e o efeito de gradiente.

Exemplos de gradiente linear:

Exemplo

Exemplo 1

Este gradiente linear começa do topo. Ele transita do vermelho para o amarelo, e depois para o azul:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Experimente você mesmo

Exemplo 2

Um gradiente linear que começa da esquerda. Ele transita do vermelho para o azul:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Experimente você mesmo

Exemplo 3

Um gradiente linear que começa no canto superior esquerdo (e se estende até o canto inferior direito):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Experimente você mesmo

Exemplo 4

Um gradiente linear que especifica um ângulo:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Experimente você mesmo

Exemplo 5

Um gradiente linear que contém vários marcadores de cor:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Experimente você mesmo

Exemplo 6

Um gradiente linear com dois corrimãos de posição:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Experimente você mesmo

Exemplo 7

Um gradiente linear com transparência:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Experimente você mesmo

Sintaxe do CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa função.

Páginas relacionadas

Tutorial:Gradiente do CSS

Referência：Atributo background-image CSS

Referência：Função conic-gradient() do CSS

Referência：Função radial-gradient() do CSS

Referência：Função repeating-conic-gradient() do CSS

Referência：Função repeating-linear-gradient() do CSS

Referência：Função repeating-radial-gradient() do CSS