Gradientes CSS

Índice

    Mostrar índice

Fundos gradientes:

Gradient Backgrounds

Gradientes CSS permitem exibir transições suaves entre duas ou mais cores especificadas.

CSS define três tipos de gradientes:

  • Gradientes lineares (desce/cima/esquerda/direita/diagonalmente)

  • Gradientes radiais (definidos pelo centro)

  • Gradientes Cônicos (girados em torno de um ponto central)

Gradientes Lineares CSS

Para criar um gradiente linear você deve definir pelo menos duas paradas de cor. Paradas de cores são as cores que você deseja renderizar em transições suaves entre. Você também pode definir um ponto inicial e uma direção (ou um ângulo) ao longo com o efeito gradiente.

Sintaxe

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direção - De cima para baixo (este é o padrão)

O exemplo a seguir mostra um gradiente linear que começa no topo. Começa em vermelho, passando para amarelo:

top to bottom (default)

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Direção - Da esquerda para a direita

O exemplo a seguir mostra um gradiente linear que começa da esquerda. Começa em vermelho, fazendo a transição para amarelo:

left to right

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

Direção - Diagonal

Você pode fazer um gradiente diagonalmente especificando as posições iniciais horizontal e vertical.

O exemplo a seguir mostra um gradiente linear que começa no canto superior esquerdo (e vai para o canto inferior direito). Começa em vermelho, passando para amarelo:

top left to bottom right

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

Usando ângulos

Se você quiser mais controle sobre a direção do gradiente, você pode definir um ângulo, em vez das direções predefinidas (para baixo, para superior, para a direita, para a esquerda, para a direita inferior, etc.). Um valor de 0deg é equivalente a "para cima". Um valor de 90 graus é equivalente a "para a direita". Um valor de 180 graus é equivalente a "até o fundo".

Sintaxe

background-image: linear-gradient(angle, color-stop1, color-stop2);

O exemplo a seguir mostra como usar ângulos em gradientes lineares:

180deg

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Usando múltiplas paradas de cores

O exemplo a seguir mostra um gradiente linear (de cima para baixo) com múltiplas paradas de cores:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

O exemplo a seguir mostra como criar um gradiente linear (da esquerda para a direita) com a cor do arco-íris e algum texto:

Rainbow Background

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Usando transparência

Os gradientes CSS também suportam transparência, que pode ser usada para criar efeitos de desbotamento.

Para adicionar transparência, usamos a função rgba() para definir as paradas de cores. O último parâmetro na função rgba() pode ser um valor de 0 a 1, e define a transparência da cor: 0 indica transparência total, 1 indica cores completas (sem transparência).

O exemplo a seguir mostra um gradiente linear que começa da esquerda. Ele começa totalmente transparente, passando para a cor vermelha:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

Repetindo um gradiente linear

A função Repeating-linear-gradient() é usada para repetir gradientes lineares:

Exemplo

Um gradiente linear repetido:

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>