27 exemplos elegantes de gradiente de fundo de CSS

junho 29, 2021 gurinho

Manter-se atualizado sobre as principais tendências e padrões de web design é muito importante para um designer ou desenvolvedor. Atualmente, os gradientes de fundo são amplamente usados em sites modernos.

Neste artigo, vamos percorrer diferentes exemplos de gradientes de fundo usando CSS.

Gradientes de fundo usando CSS

O gradiente CSS exibe uma transição suave usando duas ou mais cores especificadas. O gradiente CSS fornece melhor controle e desempenho em relação ao uso de um arquivo de imagem real (de um gradiente). A propriedade CSS background-image é usada para declarar gradientes como plano de fundo.

Existem três tipos de gradientes: linear (criado com a função gradiente linear () ), radial (criado com a função gradiente radial () ) e cônico (criado com a função gradiente cônico () ). Além disso, você pode criar gradientes de repetição com as funções gradiente linear de repetição () , gradiente radial de repetição () e gradiente cônico de repetição () .

MDN Docs define essas funções como:

gradiente linear () : A função CSS gradiente linear () cria uma imagem que consiste em uma transição progressiva entre duas ou mais cores ao longo de uma linha reta. Seu resultado é um objeto do tipo de dados <gradient> , que é um tipo especial de <image> .

gradiente radial () : a função CSS gradiente radial () cria uma imagem que consiste em uma transição progressiva entre duas ou mais cores que irradiam de uma origem. Sua forma pode ser um círculo ou uma elipse. O resultado da função é um objeto do tipo de dados <gradient> , que é um tipo especial de <image> .

gradiente cônico () : A função CSS gradiente cônico () cria uma imagem que consiste em um gradiente com transições de cores giradas em torno de um ponto central (em vez de irradiar do centro). Os gradientes cônicos de exemplo incluem gráficos de pizza e rodas de cores. O resultado da função conic-gradient () é um objeto do tipo de dados <gradient> , que é um tipo especial de <image> .

gradiente linear de repetição () : A função CSS gradiente linear de repetição () cria uma imagem que consiste em gradientes lineares repetitivos. É semelhante a gradiente / gradiente linear () e recebe os mesmos argumentos, mas repete os pontos de cor infinitamente em todas as direções de modo a cobrir todo o seu contêiner. O resultado da função é um objeto do tipo de dados <gradient> , que é um tipo especial de <image> .

gradiente radial de repetição () : A função CSS gradiente radial de repetição () cria uma imagem que consiste em gradientes repetidos que irradiam de uma origem. É semelhante a gradiente / gradiente radial () e leva os mesmos argumentos, mas repete os pontos de cor infinitamente em todas as direções de modo a cobrir todo o seu contêiner, semelhante a gradiente / gradiente linear de repetição (). O resultado da função é um objeto do tipo de dados <gradient> , que é um tipo especial de <image> .

gradiente-cônico-repetitivo () : A função CSS gradiente-cônico-repetitivo () cria uma imagem que consiste em um gradiente repetitivo (em vez de um único gradiente) com transições de cores giradas em torno de um ponto central (em vez de irradiar do centro).

Aqui está a sintaxe oficial de cada tipo de gradiente.

Sintaxe oficial de gradientes lineares

 linear-gradient(
 [ <angle> | to <side-or-corner> ]? ,
 <color-stop-list>
 )
 <side-or-corner> = [to left | to right] || [to top | to bottom]

Sintaxe oficial de gradientes radiais

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

Sintaxe oficial de gradientes cônicos

 conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>
 )

Aqui estão alguns exemplos incríveis de gradientes de fundo que podem aprimorar a interface do usuário do seu site para o próximo nível.