Função linear-gradient
A função linear-gradient define um gradiente
linear. É aplicada a propriedades que
definem uma imagem de fundo: background,
background-image
ou uma imagem de borda: border-image,
background-image-source.
Sintaxe
seletor {
background: linear-gradient([ângulo ou direção], cor1 tamanho1, cor2 tamanho2...);
}
Valores
| Valor | Descrição |
|---|---|
| direção |
Define uma direção específica para o gradiente em quaisquer unidades para ângulos
ou por palavras-chave top, left, right, bottom
ou suas combinações: top left, top right e assim por diante.
A ordem das palavras não importa: pode-se escrever top left e left top,
não há diferença. O parâmetro é opcional: se não for especificado, o gradiente será
de cima para baixo (como em to top). Antes da direção coloca-se a palavra to.
|
| ângulo | Ângulo em quaisquer unidades para ângulos. Pode ser positivo ou negativo. O parâmetro é opcional. Simultaneamente pode ser especificado ou um ângulo, ou uma direção (ou nada). |
| cor1 | Cor inicial do gradiente em quaisquer unidades para cor. |
| cor2 | Cor final do gradiente em quaisquer unidades para cor. |
| tamanho | Define a extensão de uma cor específica do gradiente em quaisquer unidades para tamanho. |
Exemplo . A opção mais simples
Sintaxe:
seletor {
background: linear-gradient(cor inicial, cor final);
}
Vejamos um exemplo:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando um ângulo
Sintaxe:
seletor {
background: linear-gradient(ângulo, cor inicial, cor final);
}
Vejamos um exemplo:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando uma direção
Em vez de um ângulo, pode-se adicionar uma direção
top, left, right, bottom
ou suas combinações: top left, top right
Antes da direção coloca-se a palavra to.
Sintaxe:
seletor {
background: linear-gradient(direção, cor inicial, cor final);
}
Vejamos um exemplo:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando uma direção
Vamos especificar outra direção:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando tamanho
Sintaxe:
seletor {
background: linear-gradient(cor1 tamanho1, cor2 tamanho2);
}
No próximo exemplo, o comportamento será o seguinte:
cor vermelha pura será de 0px até
30px, de 30px até 50px
haverá um gradiente de vermelho para azul, e
de 50px até o final - azul puro:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Exemplo . Adicionando mais de 2 cores
Sintaxe:
seletor {
background: linear-gradient(cor1 tamanho1, cor2 tamanho2, cor3 tamanho3...);
}
No próximo exemplo, o comportamento será o seguinte:
cor vermelha pura será de 0px até
30px, de 30px até 50px
haverá um gradiente de vermelho para azul, e
de 50px até 70px - um gradiente de azul
para verde, e após 70px - verde puro:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Exemplo . Transições abruptas
No próximo exemplo, o comportamento será o seguinte:
cor vermelha pura será de 0px até
30px, azul puro - de 30px
até 60px, verde puro - após 60px
(red 0px pode ser omitido):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Exemplo . Os tamanhos também podem ser especificados em porcentagens
No próximo exemplo, o comportamento será o seguinte:
cor vermelha pura será de 0% até
30%, azul puro - de 30%
até 60%, verde puro - após 60%
(red 0% pode ser omitido):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Exemplo . Combinação com background-size
No próximo exemplo, o comportamento será o seguinte:
cor vermelha pura será de 0px até
30px, azul puro - de 30px
até 60px, sendo que tudo isso se repetirá
em pedaços de 60px (devido a background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Veja também
-
a função
radial-gradient,
que cria um gradiente radial -
a função
repeating-linear-gradient,
que cria um gradiente linear repetitivo -
a função
repeating-radial-gradient,
que cria um gradiente radial repetitivo
