Gradiente CSS – gerando efeito gradiente apenas com CSS

Neste post vou fazer algumas experiências e analisar como implementar a função gradient apenas com CSS. O recurso pode ser utilizado da mesma forma que o background-color padrão apenas alterando uma propriedade da função, sem a necessidade de utilizar imagens ou outros recursos.

Introdução

Foi-se o tempo que para gerar um fundo com cores em gradiente era necessário gerar uma imagem e replica-la com as tags background e repeat.

Como havia mencionado, a função gradient do CSS3 é utilizada apenas incluindo um parâmetro na propriedade do background-image (ou apenas background para gradientes com transparência), como no exemplo a seguir:

background-image: linear-gradient(black, white);

A possibilidade de gerar efeito gradiente apenas com código abre a porta para novos layouts sem que isso interfira no carregamento das páginas, como por exemplo uma imagem interferia.

Abaixo segue a referência de compatibilidade com os navegadores e suas versões.

Propriedade Internet Explorer Chrome Firefox Safari Opera
linear-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 10.0 26.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

Vamos testar as propriedade em uma div. Quem quiser editar e entender a fundo como o gradiente funciona, pode editar o exemplo direto no CodePen.

Linear-gradient

Essa propriedade gera aquele efeito padrão do gradiente onde é feita a transição de uma cor para a outra em linha reta ou linear.

Para entender, visualize o exemplo abaixo. Lembrando que para testar basta clicar no link Edit on CodePen.

See the Pen Linear Gradient – by Thierry Rene dos Santos Matos (@thierryrene) on CodePen.

Notas sobre o CSS:

  • a virgula na linha background-image: linear-gradient(gold, tomato, aliceblue); é utilizada para separar as cores que vão gerar o gradiente. As cores podem ser declaradas pelo Hex, nome da cor, rgba, hsla, etc.
  • a outra propriedade background-color: red; é utilizada para declarar a cor do fundo de tela caso o navegador não suporte o efeito gradiente.

Também podemos definir a que direção inicia o efeito gradiente com os parâmetros right, left, top, bottom. Visualize o exemplo abaixo.

See the Pen CSS Gradient – right, left, top, bottom by Thierry Rene dos Santos Matos (@thierryrene) on CodePen.

A direção também pode ser dada com graus, como no exemplo abaixo:

.gradiente {
  background-image:
    linear-gradient(
      15deg,
      gold, blue);
}

Você também pode definir quando vai começar o gradiente de uma cor, mas neste temos que levar em consideração o espaço necessário para gerar um gradiente, pois se for definido muito próximo da cor, o gradiente não será gerado. Considere o exemplo a seguir:

.gradiente {
  height: 100px;
  background-color: red;
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%,
      blue 10%
    );
}

Note que a cor vermelha inicia o gradiente e em 10% (referencia baseada na medida do width) do gradiente é iniciada a cor amarela, logo após também com 10% é iniciada a cor azul. A cor azul não vai apresentar gradiente pois não tem espaço disponível para uma cor traspor a outra. Altere de 10% para 20% e veja que agora possui, mesmo que leve, a transposição do amarelo para o azul, como no exemplo abaixo:

See the Pen CSS Gradient – definindo cores com porcentagem by Thierry Rene dos Santos Matos (@thierryrene) on CodePen.

Também podemos gerar um gradiente transparente com uma leve alteração na sintaxe, como no exemplo:

.gradiente {
  height: 100px;
  background-color: red;
  background: -webkit-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Note que a propriedade utilizada é a background e não background-image, e esse recurso é utilizado com o prefix de cada motor de renderização referente aos navegadores existentes, no caso webkit – Google Chrome / Safari, o – Opera e moz – Firefox. Efetuei teste com o prefix standard, que seria o padrão, mas não funcionou, porém com o webkit funciona perfeitamente, no Chrome.

Radial-gradient

Também existe a possibilidade de gerar um gradiente circular, que vem de dentro para fora em forma de circulo. A primeira cor declarada inicia o gradiente de dentro para fora, segue exemplo editável.

See the Pen CSS Gradient – Radial by Thierry Rene dos Santos Matos (@thierryrene) on CodePen.

O radial-gradient padrão vai gerar um gradiente circular, mas você pode forçar que o mesmo seja renderizado de forma diferente com o parametro circle closest-side, conforme o exemplo de código abaixo:

.gradiente {
  height: 300px;
  width: 300px;
  background-image:
    radial-gradient(circle closest-side,
                    orangered,
                    darkblue
    );
}

Esse recurso vai centralizar mais o gradiente para o centro.

Assim como no linear-gradient, o radial-gradient também tem alguns parâmetros para alterar a posição de inicio do gradiente, como basta alterar uma linha um item, vou apresentar apenas o código a fim de vocês efetuarem testes para entender a funcionalidade.

O elementos que podem ser utilizados são: closest-corner, closest-side, farthest-corner, farthest-side.

Também da para determinar de onde vai começar o gradiente assim como no linear-gradient, neste caso adicionamos o parâmetro at e selecionamos umas das posições top, bottom, right ou left, como no exemplo:

.gradiente {
  background-image:
    radial-gradient(
      circle at top right,
      gold,
      blue
    );
}

Basicamente é isso, lembrando que esses efeitos não funcionam no Internet Explorer, a não ser que seja utilizada a técnica abaixo para declarar o gradiente.

/* IE 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

/* IE 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Não testei com o internet explorer, mas em caso de duvidas encaminhem um comentário que verificamos juntos.

Ferramentas on-line para gerar gradiente em CSS

Ultimate CSS Gradient Generator – ColorZilla – ferramenta completa para gerar gradiente.

CSS Gradient Background Maker – Microsoft / Internet Explorer – ferramente da microsoft pensando no IE, também gera código para outros navegadores.

Grad3 – ferramenta bem legal e com vários exemplos interessantes de gradiente CSS.

CSS3Gen – ferramenta completa e fácil de usar.

Posts de referência

CSS Tricks – CSS Gradient

W3Schools – CSS Gradient

Qualquer outra duvida relacionada ao texto, por favor encaminhem um comentário.

Grato. 🙂