--- title: CSS3 Gradients localeTitle: Gradientes CSS3 --- ## Gradientes CSS3 Os gradientes CSS3 permitem exibir transições suaves entre duas ou mais cores especificadas. Antes, você tinha que usar imagens para esses efeitos. No entanto, usando gradientes CSS3, você pode reduzir o tempo de download e o uso de largura de banda. Além disso, os elementos com gradientes parecem melhores quando ampliados, porque o gradiente é gerado pelo navegador. CSS3 define dois tipos de gradientes: * Gradientes Lineares (desce / sobe / esquerda / direita / diagonalmente) * Gradientes radiais (definidos pelo centro) ### Gradientes Lineares CSS3 Para criar um gradiente linear, você deve definir pelo menos duas paradas de cor. As paradas de cores são as cores que você deseja renderizar transições suaves entre. Você também pode definir um ponto de partida e uma direção (ou um ângulo) junto com o efeito de gradiente. #### Sintaxe ``` background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` ##### Gradiente linear - de cima para baixo (este é o padrão) O exemplo a seguir mostra um gradiente linear que começa no topo. Começa vermelho, fazendo a transição para amarelo: ![gradiente linear padrão](https://i.imgur.com/2uGfleD.jpg) #### Exemplo ```

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![gradiente linear padrão](https://i.imgur.com/CvtXCMd.jpg) ##### Gradiente Linear - da esquerda para a direita O exemplo a seguir mostra um gradiente linear que começa a partir da esquerda. Começa vermelho, fazendo a transição para amarelo: ![esquerda para a direita](https://i.imgur.com/e4dRvZR.jpg) #### Exemplo ```

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![esquerda para a direita](https://i.imgur.com/k4FSyXz.jpg) #### Gradiente Linear - Diagonal Você pode fazer um gradiente na diagonal, 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 vermelho, fazendo a transição para amarelo: ![diagonal](https://i.imgur.com/YvtbUBH.jpg) #### Exemplo ```

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![diagonal-exp](https://i.imgur.com/8gKRhAp.jpg) #### Mais Informações: [Documentação do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) || [w3schools](https://www.w3schools.com/css/css3_gradients.asp)