Gradientes

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript permitem gradientes CSS3 (Folhas de Estilos em Cascata, Nível 3) em qualquer propriedade que aceite imagens, como a propriedade background-image (mais o valor image da propriedade abreviada background), a propriedade list-style-image e o conteúdo gerado. Os gradientes atuam conforme especificado na seção Gradients (Gradientes) do CSS3 Image Values and Replaced Content Module (Módulo de Conteúdo Substituído e Valores de Imagem CSS3) que, na ocasião em que este documento foi redigido, estava no estágio de Recomendação Candidata.

Gradientes são imagens que fazem uma transição suave de uma cor para outra. O Internet Explorer 10 fornece suporte para gradientes CSS3 lineares, circulares e elípticos, cada um dos quais são especificados por uma linha de gradiente e dois ou mais pontos de parada. Cada ponto de parada tem sua própria cor, e o Windows Internet Explorer preenche a área entre cada conjunto de pontos com uma transição de cor contínua de um para o outro.

Gradientes lineares

Em um gradiente linear, as cores têm uma transição suave ao longo de uma linha. Gradientes lineares são criados primeiro especificando uma linha gradual para o gradiente seguir e depois os dois ou mais pontos de parada de cores, separados por vírgulas. A sintaxe básica do gradiente linear é a seguinte:

linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

linear-gradient()

Especifica um gradiente linear, estabelecendo uma linha gradual e duas ou mais cores de parada e deslocamentos.

Os valores possíveis para a propriedade são descritos a seguir:

<angle>

Opcional. O ângulo que a linha gradual deve presumir, expresso como um número seguido por um designador de unidades de ângulo (por exemplo, "deg").

"0deg" aponta para cima e os ângulos positivos aumentam no sentido horário. Portanto, "90deg" aponta para a direita, "180deg" aponta para baixo, e assim por diante.

Se nenhum ângulo for fornecido, a linha gradual começará no canto ou no lado oposto ao canto ou no lado especificado por <side-or-corner>.

<side-or-corner>

Valor opcional que especifica um lado ou canto final para o gradiente. Esse valor começa com "to", que é seguido por uma ou duas das palavras-chave a seguir. Incluindo uma palavra-chave que especifica um lado final e duas palavras-chave que especificam um canto final.

  • Os seguintes valores podem ser usados somente como primeiro valor:
    • left  Indica o término do gradiente à esquerda.
    • right  Indica o término do gradiente à direita.
  • Os seguintes valores podem ser usados somente como segundo valor:
    • top  Indica o término do gradiente na parte superior.
    • bottom  Indica o término do gradiente na parte inferior.
  • Não incluindo quaisquer palavras-chave ou ângulo é equivalente a "to bottom".
<color-stop>

Pelo menos duas paradas de cor são necessárias. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente opcional de posição.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um para o outro. Esse valor pode ser qualquer valor de cor compatível.

Cada ponto de parada pode ter uma porcentagem opcional ou valor de comprimento compatível que indica onde colocar a parada de cor ao longo da linha gradual. "0%" (ou "0px", "0em", e assim por diante) indica o ponto (ou lado) de partida; "100%" indica o ponto (ou lado) final.

 

O seguinte gradiente linear (usado como argumento para a propriedade background-image) tem três paradas de cor:

  • A primeira parada de cor está no canto superior direito e define uma linha gradual que se estende até o canto inferior esquerdo. A primeira parada apresenta um tom de amarelo.
  • A segunda parada de cor está na metade da linha gradual e apresenta um sombreamento de verde.
  • A parada de cor final está a 80% da linha gradual e apresenta um tom de azul. Desta parada até o final da linha gradual (entre 80% e 100%) a cor permanece nesse tom de azul.

A linha gradual começa no canto superior direito do retângulo e termina no canto inferior esquerdo. O ângulo real depende das dimensões do elemento preenchido pelo gradiente.

Exemplo de um gradiente linear começando no canto superior direito

background-image: linear-gradient(to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%);


Para replicar este gradiente usando um ângulo com a caixa de mesmo tamanho (250 px × 150 px), você especificaria o seguinte:


background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Claro, quando o tamanho da área de preenchimento muda, esses dois gradientes parecem diferentes. Lembre-se disso ao decidir como especificar seus gradientes. O primeiro gradiente definido (com "to bottom left" especificado) é mostrado aqui em uma caixa de 450 px por 150 px.

Imagem de um gradiente linear em um retângulo mais largo que o primeiro

O segundo gradiente definido (com "210deg" especificado) é mostrado aqui em uma caixa do mesmo tamanho.

Imagem de outro gradiente em um retângulo largo, com mais amarelo mostrado

Gradientes radiais

Diferentemente dos gradientes lineares, que progridem de uma extremidade de uma linha para a outra, os gradientes radiais surgem de um único ponto e se espalham suavemente para fora em um círculo ou elipse. Você especifica um gradiente radial definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) do círculo ou elipse final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas. A sintaxe básica do gradiente radial é a seguinte:

radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

radial-gradient()

Especifica um gradiente radial definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) da elipse ou do círculo final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas.

Os valores possíveis para a propriedade são descritos a seguir:

<shape>

Valor opcional que especifica a forma final do gradiente. Se esse valor for omitido, a forma final será um círculo se o parâmetro size for um valor de comprimento único e, caso contrário, uma elipse.

  • ellipse  Indica que o gradiente tem a forma de uma elipse.
  • circle  Indica que o gradiente tem a forma de um círculo.
<size>

Valor opcional que especifica o tamanho da forma final do gradiente. Se este valor for omitido, o padrão será farthest-corner.

  • <length(s)>  

    Um ou dois valores de comprimento delimitado por espaço ou duas porcentagens.

    Se um valor de comprimento for especificado, ele indicará o raio do círculo.

    Se dois valores (comprimento ou porcentagem) forem especificados, o primeiro valor representará o raio horizontal e o segundo o raio vertical.

    Valores percentuais são relativos à dimensão correspondente da caixa de gradiente. Porcentagens só podem ser usadas para especificar o tamanho de um gradiente elíptico, não de um circular.

    Valores negativos são inválidos.

  • closest-side  Para gradientes circulares, esse valor indica que a forma final é do tamanho do círculo, de modo que ele corresponda exatamente com o lado da caixa mais próxima ao seu centro. Para gradientes elípticos, a forma de gradiente é um tamanho de elipse de modo que ele corresponda exatamente com os lados verticais e horizontais da caixa mais próxima ao seu centro.
  • closest-corner  Dimensiona a forma de gradiente para que ela corresponda exatamente com o canto mais próximo da caixa a partir de seu centro. Para gradientes elípticos, a forma de gradiente tem a mesma proporção de largura e altura que teria se closest-side fosse especificado.
  • farthest-side  Semelhante a closest-side, exceto a forma de gradiente que é dimensionada para corresponder-se com o lado da caixa mais distante do seu centro (para gradientes circulares) ou os lados verticais e horizontais mais distantes (para gradientes elípticos).
  • farthest-corner  Dimensiona a forma de gradiente para que ela corresponda exatamente com o canto mais distante da caixa a partir de seu centro. Para gradientes elípticos, a forma de gradiente tem a mesma proporção de largura e altura que teria se farthest-side fosse especificado.
<position>

Valor opcional que especifica o centro do gradiente. Este valor pode aceitar os mesmos valores que a propriedade background-position. Se este valor for omitido, o padrão será center.

<color-stop>

Pelo menos duas paradas de cor são necessárias. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente opcional de posição.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um para o outro. Esse valor pode ser qualquer valor de cor compatível.

O segundo componente é uma porcentagem opcional ou valor decimal que indica onde colocar a parada de cor ao longo do raio do gradiente (semelhante a uma linha gradual em um linear-gradient, mas a partir do centro para fora). "0%" indica o início de raio do gradiente, e "100%" indica o ponto onde o raio do gradiente cruza a forma final. Por exemplo, um valor de "20%" indica que a parada de cor deve ser colocada em um ponto de 20% do comprimento do raio do gradiente, a partir do início da linha. Os valores podem ser negativos, indicando que a cor especificada para esse valor está no meio da transição para a próxima cor no centro do gradiente, de modo que a cor visível no centro está entre a cor especificada e a próxima cor. Os valores podem ser maiores que 100%, especificando uma localização correspondente a uma distância maior do centro do gradiente.

 

Muitas vezes, é possível usar a sintaxe de gradiente radial para produzir os mesmos resultados. Por exemplo, os três exemplos a seguir, quando aplicados a um elemento div de 250 × 150 pixels, produz a imagem mostrada aqui.

Gradiente elíptico simples aplicado a um retângulo de 250 por 150 pixels


background-image: radial-gradient(yellow, blue);

background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);

background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);

O exemplo a seguir é semelhante ao anterior, mas foi especificado um gradiente circular.

Gradiente circular simples aplicado a um retângulo de 250 por 150 pixels

background-image: radial-gradient(circle, yellow, blue);

O exemplo a seguir tem três cores especificadas. Qualquer das declarações produz esta imagem.

Gradiente elíptico com três paradas de cor especificadas

background-image: radial-gradient(#FFF133, #16D611, #00A3EF);

background-image: radial-gradient(ellipse at center, #FFF133 0%, #16D611 50%, #00A3EF 100%);

Claro, você também pode originar o gradiente radial em locais diferentes do centro da caixa de gradiente. Use as palavras-chave closest-side ou farthest-side para dimensionar o gradiente para que a forma final encontre o lado mais próximo ou mais distante, respectivamente, da caixa de gradiente.

Gradiente radial com três cores que começa no canto inferior esquerdo

background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);

Os exemplos a seguir definem o centro do gradiente a 40 px do lado esquerdo da caixa de gradiente e a 50 px do lado de cima da caixa de gradiente. O primeiro exemplo usa closest-side, então a forma final do gradiente é definida pelos lados mais próximos da caixa de gradiente — especificamente, os lados de cima e esquerdo.

Pequeno gradiente elíptico de três cores contido no canto superior esquerdo de uma caixa de gradiente

background-image: radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

O segundo exemplo usa farthest-side, então a forma final do gradiente é definida pelos lados mais distantes da caixa de gradiente — especificamente, os lados de baixo e direito.

Grande gradiente elíptico de três cores que termina nos lados direito e inferior de uma caixa de gradiente

background-image: radial-gradient(farthest-side at 40px 50px, #FFF133, #16D611, #00A3EF);

Se você usa closest-side ou farthest-side com gradientes circulares, o tamanho é determinado pelo lado mais próximo da caixa de gradiente. No exemplo de closest-side a seguir, esse lado é o esquerdo.

Pequeno gradiente circular de três cores contido no canto superior esquerdo de uma caixa de gradiente

background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

No exemplo de farthest-side a seguir, o tamanho do gradiente circular é determinado pelo lado direito da caixa de gradiente.

Grande gradiente circular de três cores que termina no lado direito da caixa de gradiente

background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Gradientes recorrentes

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript também dão suporte a gradientes lineares e radiais recorrentes. A sintaxe de cada uma das propriedades do gradiente recorrente é idêntica a seu equivalente não recorrente.

A sintaxe básica do gradiente linear recorrente é a seguinte:

repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

repeating-linear-gradient()

Especifica um gradiente linear repetitivo, estabelecendo uma linha gradual e duas ou mais cores de parada e deslocamentos.

Os valores possíveis para a propriedade são descritos a seguir:

<angle>

Opcional. O ângulo que a linha gradual deve presumir, expresso como um número seguido por um designador de unidades de ângulo (por exemplo, "deg").

"0deg" aponta para cima e os ângulos positivos aumentam no sentido horário. Portanto, "90deg" aponta para a direita, "180deg" aponta para baixo, e assim por diante.

Se nenhum ângulo for fornecido, a linha gradual começará no canto ou no lado oposto ao canto ou no lado especificado por <side-or-corner>.

<side-or-corner>

Valor opcional que especifica um lado ou canto final para o gradiente. Esse valor começa com "to", que é seguido por uma ou duas das palavras-chave a seguir. Incluindo uma palavra-chave que especifica um lado final e duas palavras-chave que especificam um canto final.

  • Os seguintes valores podem ser usados somente como primeiro valor:
    • left  Indica o término do gradiente à esquerda.
    • right  Indica o término do gradiente à direita.
  • Os seguintes valores podem ser usados somente como segundo valor:
    • top  Indica o término do gradiente na parte superior.
    • bottom  Indica o término do gradiente na parte inferior.
  • Não incluindo quaisquer palavras-chave ou ângulo é equivalente a "to bottom".
<color-stop>

Pelo menos duas paradas de cor são necessárias. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente opcional de posição.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um para o outro. Esse valor pode ser qualquer valor de cor compatível.

Cada ponto de parada pode ter uma porcentagem opcional ou valor de comprimento compatível que indica onde colocar a parada de cor ao longo da linha gradual. "0%" (ou "0px", "0em", e assim por diante) indica o ponto (ou lado) de partida; "100%" indica o ponto (ou lado) final.

 

A sintaxe da função repeating-linear-gradient é idêntica à da função linear-gradient.

Depois de atingir a última parada de cor, o gradiente começa novamente na primeira parada de cor e se repete. É uma boa ideia especificar cores idênticas para a primeira e a última parada de cor para evitar mudanças de cor abruptas entre cada grupo que se repete.

Segue um exemplo de um gradiente linear repetitivo. Ele transiciona entre duas cores — azul e amarelo.

Imagem de um gradiente linear repetitivo de duas cores

background-image: repeating-linear-gradient(#00A3EF, #FFF133 30px, #00A3EF 50px);

A sintaxe básica do gradiente radial recorrente é a seguinte:

repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

FunçãoDescrição

repeating-radial-gradient()

Especifica um gradiente radial repetitivo definindo primeiro um ponto central, depois o tamanho e a forma (se for uma elipse) da elipse ou círculo final — ou 100% — e então as paradas de cor no meio, separadas por vírgulas.

Os valores possíveis para a propriedade são descritos a seguir:

<shape>

Valor opcional que especifica a forma final do gradiente. Se esse valor for omitido, a forma final será um círculo se o parâmetro size for um valor de comprimento único e, caso contrário, uma elipse.

  • ellipse  Indica que o gradiente tem a forma de uma elipse.
  • circle  Indica que o gradiente tem a forma de um círculo.
<size>

Valor opcional que especifica o tamanho da forma final do gradiente. Seus valores possíveis são dois valores de comprimento delimitado por espaço (ou porcentagens) ou uma das palavras-chave a seguir. Se este valor for omitido, o padrão será farthest-corner.

  • <length(s)>  

    Um ou dois valores de comprimento delimitado por espaço ou duas porcentagens.

    Se um valor de comprimento for especificado, ele indicará o raio do círculo.

    Se dois valores (comprimento ou porcentagem) forem especificados, o primeiro valor representará o raio horizontal e o segundo o raio vertical.

    Valores percentuais são relativos à dimensão correspondente da caixa de gradiente. Porcentagens só podem ser usadas para especificar o tamanho de um gradiente elíptico, não de um circular.

    Valores negativos são inválidos.

  • closest-side  Para gradientes circulares, esse valor indica que a forma final é do tamanho do círculo, de modo que ele corresponda exatamente com o lado da caixa mais próxima ao seu centro. Para gradientes elípticos, a forma de gradiente é um tamanho de elipse de modo que ele corresponda exatamente com os lados verticais e horizontais da caixa mais próxima ao seu centro.
  • closest-corner  Dimensiona a forma de gradiente para que ela corresponda exatamente com o canto mais próximo da caixa a partir de seu centro. Para gradientes elípticos, a forma de gradiente tem a mesma proporção de largura e altura que teria se closest-side fosse especificado.
  • farthest-side  Semelhante a closest-side, exceto a forma de gradiente que é dimensionada para corresponder-se com o lado da caixa mais distante do seu centro (para gradientes circulares) ou os lados verticais e horizontais mais distantes (para gradientes elípticos).
  • farthest-corner  Dimensiona a forma de gradiente para que ela corresponda exatamente com o canto mais distante da caixa a partir de seu centro. Para gradientes elípticos, a forma de gradiente tem a mesma proporção de largura e altura que teria se farthest-side fosse especificado.
<position>

Valor opcional que especifica o centro do gradiente. Este valor pode aceitar os mesmos valores que a propriedade background-position. Se este valor for omitido, o padrão será center.

<color-stop>

Pelo menos duas paradas de cor são necessárias. Cada parada de cor tem um ou dois componentes — um componente de cor e um componente opcional de posição.

O primeiro componente define o componente de cor de um ponto de parada do gradiente. Cada ponto de parada tem sua própria cor designada e a área entre cada ponto é preenchida com uma transição de cor contínua de um para o outro. Esse valor pode ser qualquer valor de cor compatível.

O segundo componente é uma porcentagem opcional ou valor decimal que indica onde colocar a parada de cor ao longo do raio do gradiente (semelhante a uma linha gradual em um linear-gradient, mas a partir do centro para fora). "0%" indica o início de raio do gradiente, e "100%" indica o ponto onde o raio do gradiente cruza a forma final. Por exemplo, um valor de "20%" indica que a parada de cor deve ser colocada em um ponto de 20% do comprimento do raio do gradiente, a partir do início da linha. Os valores podem ser negativos, indicando que a cor especificada para esse valor está no meio da transição para a próxima cor no centro do gradiente, de modo que a cor visível no centro está entre a cor especificada e a próxima cor. Os valores podem ser maiores que 100%, especificando uma localização correspondente a uma distância maior do centro do gradiente.

 

A sintaxe da função repeating-radial-gradient é idêntica à da função radial-gradient.

Depois de atingir a última parada de cor, o gradiente começa novamente na primeira parada de cor e se repete. É uma boa ideia especificar cores idênticas para a primeira e a última parada de cor para evitar mudanças de cor abruptas entre cada grupo que se repete.

A declaração a seguir cria um gradiente circular repetitivo.


background-image: repeating-radial-gradient(closest-side circle at 40px 50px, #FFF133, #16D611, #00A3EF);

Imagem de um gradiente circular repetitivo de três cores

A declaração a seguir cria um gradiente elíptico repetitivo.


background-image: repeating-radial-gradient(closest-side at 40px 50px, #FFF133, #16D611, #00A3EF, #FFF133);


Imagem de um gradiente elíptico repetitivo de três cores

Pontos Médios de Gradiente CSS

O Microsoft Edge introduziu o suporte aos Pontos Médios de Gradiente CSS ou dicas de cores. Com Pontos Médios de Gradiente CSS, você pode especificar um local opcional entre as paradas de cor de um gradiente CSS. A cor sempre ficará exatamente entre as cores das duas paradas nesse ponto. Outras cores da linha gradual são calculadas com a utilização de uma função de interpolação exponencial descrita pela especificação Valores de imagem de CSS e Módulo de Conteúdo Substituído Nível 3.

No exemplo a seguir de 90 graus, em um gradiente linear de verde e amarelo, um ponto médio é colocado em 30%.


background: linear-gradient(90deg, rgb(255, 255, 0) 0%, 30%, rgb(0, 128, 0) 100%)

Um gradiente linear com um ponto médio em 30%

Confira a demonstração dos Pontos Médios de Gradiente CSS.

Referência de API

Gradients

Amostras e tutoriais

Exemplo de gradientes CSS

Demonstrações do Test Drive do Internet Explorer

Criador de tela de fundo em gradiente CSS
Irish Spring

Postagens no blog do IE

Gradientes CSS3 não prefixados no IE10
Levando a Web estável adiante no IE10 Release Preview
Gradientes CSS3 na visualização de plataforma 1 do IE10

Especificação

Módulo de Conteúdo Substituído e Valores de Imagem CSS3: Seção 4

 

 

Mostrar: