Função CSS linear-gradient()
Exemplo
Este gradiente linear começa no topo. Começa em vermelho, passando para amarelo e depois para azul:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A função linear-gradient() define um gradiente linear como imagem de fundo.
Para criar um gradiente linear, você deve definir pelo menos duas paradas de cor. As paradas de cor são as cores entre as quais você deseja renderizar transições suaves. Você também pode definir um ponto de partida e uma direção (ou um ângulo) junto com o efeito de gradiente.
Exemplo de gradiente linear:
Versão: | CSS3 |
---|
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a função.
Números seguidos por -webkit-, -moz- ou -o- especificam a primeira versão que funcionou com um prefixo.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Sintaxe CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
Mais exemplos
Exemplo
Um gradiente linear que começa da esquerda. Ele começa vermelho, passando para azul:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Exemplo
Um gradiente linear que começa no canto superior esquerdo (e vai para o canto inferior direito):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Exemplo
Um gradiente linear com um ângulo especificado:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Exemplo
Um gradiente linear com várias paradas de cores:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Exemplo
Um gradiente linear com transparência:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Páginas relacionadas
Tutorial CSS: Gradientes CSS