Elementos de estilo de site com um gradiente de fundo CSS

Se você já está na Internet há mais de alguns minutos, é provável que tenha encontrado um gradiente CSS. A propriedade CSS background pode ser usada para criar uma variedade de estilos diferentes, e um dos tipos mais intrigantes é o que ela pode fazer com o valor do gradiente.

Saber como projetar e criar diferentes gradientes CSS é uma vantagem para qualquer designer ou desenvolvedor de software. Com este artigo, você aprenderá tudo o que precisa saber para começar a incorporar gradientes CSS em seus projetos.

O que é um gradiente CSS?

Um gradiente CSS é essencialmente a combinação de duas ou mais cores que fazem a transição suave de uma para a outra. O estado de transição de um gradiente CSS depende do tipo de gradiente usado. Existem dois tipos principais de gradientes comumente usados ​​no projeto de software: linear e radial.

No entanto, existe um terceiro tipo de gradiente que é menos popular e conhecido como gradiente cônico.

Sintaxe de gradientes CSS

Imagem de fundo: tipo gradiente (direção, cor1, cor2);

O gradiente CSS deve ser atribuído à propriedade CSS da imagem de fundo. O tipo de gradiente pode ser um de vários; gradiente linear, gradiente radial ou gradiente cônico. O tipo de gradiente é seguido por colchetes de abertura e fechamento que contém a direção de transição do gradiente, bem como as cores a serem incluídas no gradiente.

Relacionado: Como definir uma imagem de fundo em CSS

O exemplo acima mostra duas cores, mas um gradiente pode conter várias cores diferentes. O único requisito é que cada cor da lista seja separada por uma vírgula.

O que é um gradiente linear?

O gradiente linear é o gradiente CSS mais popular. Ele cria um gradiente de transição horizontal, vertical ou diagonal usando duas ou mais cores.

Exemplo de gradiente linear CSS

Imagem de fundo: gradiente linear (# 00A4CCFF, # F95700FF);

O código acima produzirá o seguinte gradiente CSS:

Há um componente principal da sintaxe do gradiente omitido no exemplo acima. Este componente é a direção de transição do gradiente e foi omitido porque o alinhamento padrão do gradiente linear é vertical (de cima para baixo); essa é a saída desejada neste exemplo.

O código acima produz o mesmo resultado que a linha de código a seguir. A única diferença entre os dois é a seção de direção do código.

Usando o Exemplo de Gradiente Linear Inferior

Imagem de fundo: gradiente linear (para baixo, # 00A4CCFF, # F95700FF);

Como você pode ver na saída, o código acima cria um gradiente que começa com azul na parte superior e, em seguida, muda lentamente para laranja na parte inferior. Se você quiser inverter a ordem das cores, pode simplesmente substituir o para baixo com para cima e isso inverterá a direção do gradiente, produzindo a seguinte saída:

Semelhante ao alinhamento vertical, o alinhamento horizontal de um gradiente pode ser alcançado com o uso de dois conjuntos de palavras-chave de direção: para a esquerda e para a direita, que produzirá as seguintes saídas, respectivamente.

Gradiente Linear Diagonal

É possível obter uma transição de gradiente linear diagonal em qualquer direção de um gradiente linear. Existem apenas quatro listas específicas de palavras-chave que você precisa saber para tornar isso possível.

• À direita inferior
• Para baixo à esquerda
• Para cima à direita
• Para cima à esquerda

Usando o Exemplo de Gradiente Linear Diagonal

Imagem de fundo: gradiente linear (para o canto inferior direito, # 00A4CCFF, # F95700FF);

O exemplo acima produz a seguinte saída:

Como você pode ver na saída acima, o gradiente linear faz sua transição em uma direção diagonal movendo-se da seção superior esquerda para a parte inferior direita do gradiente.

Gradiente Linear Multicolorido

Um gradiente linear pode ter duas ou mais cores, mas como são as cores em um gradiente? Um arranjo de cores gradiente linear multicolorido depende de sua direção. Aqueles em transição na direção horizontal terão cada nova cor aparecendo à esquerda ou à direita do gradiente linear, dependendo da direção exata do gradiente linear.

Exemplo de gradiente linear multicolorido

Imagem de fundo: gradiente linear (para a direita, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

A linha de código acima produzirá a seguinte saída:

Como você pode ver, cada nova cor é adicionada à direita do gradiente, criando o que eventualmente se transforma em um arco-íris. A mesma saída pode ser obtida na direção vertical; entretanto, o arranjo de cores específico no gradiente linear dependerá da palavra-chave de direção vertical (para cima ou para baixo).

O que é um gradiente radial?

O gradiente radial cria um gradiente em espiral de duas cores que começam do centro por padrão. Onde o gradiente linear produz um gradiente reto que flui vertical ou horizontalmente, o gradiente radial produz um gradiente circular que flui do centro para as bordas externas.

Usando o exemplo de gradiente radial

Imagem de fundo: gradiente radial (círculo, # 00A4CCFF, # F95700FF);

A linha de código acima produzirá a seguinte saída:

Alterando o centro do gradiente radial

Por padrão, um gradiente radial começa no centro do gradiente; no entanto, é possível alterar o ponto de origem com a introdução de algumas palavras-chave.

Exemplo de alteração da posição inicial do gradiente radial

Imagem de fundo: gradiente radial (círculo no canto superior direito, # 00A4CCFF, # F95700FF);

A linha de código acima produzirá a seguinte saída:

Como você pode ver na saída acima, o gradiente agora começa no canto superior direito em vez do centro. Esta mudança é possível devido à inclusão da palavra-chave canto superior direito no código acima. A seguinte lista de palavras-chave também pode ser usada para alterar o ponto de origem do gradiente radial:

• Superior esquerdo
• Canto inferior direito
• Inferior esquerdo

Gradientes radiais multicoloridos

Assim como o gradiente linear, o gradiente radial também pode usar duas cores mais, a principal diferença é que onde o gradiente linear adiciona ao gradiente em uma linha reta, o gradiente radial adiciona novas cores na parte externa borda.

Exemplo de gradiente radial multicolorido

Imagem de fundo: gradiente radial (círculo, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

A linha de código acima produzirá a seguinte saída:

Personalizando Gradientes

Até agora, você viu como alterar a direção e o ponto central de um gradiente, mas não viu como personalizar um gradiente. Personalizar um gradiente pode parecer muito trabalhoso, mas depois que você entender os fundamentos da criação um gradiente de fundo de CSS a próxima etapa óbvia é aprender como tornar seus gradientes de CSS mais único.

Por padrão, as cores em um gradiente ocupam uma quantidade de espaço uniformemente distribuída, com cada cor passando por uma transição suave para a seguinte. Portanto, se duas cores forem combinadas para formar um gradiente, cada cor ocupará metade do espaço disponível durante a transição de uma para a outra. Se três cores forem combinadas, cada cor ocupará um terço do espaço disponível.

Com um gradiente personalizado, você pode definir a quantidade de espaço que uma cor ocupará em um gradiente, atribuindo explicitamente o posição de parada de cor.

Personalizando um Gradiente Linear, Exemplo 1

Imagem de fundo: gradiente linear (para a direita, # 00A4CCFF, # F95700FF 30%);

A linha de código acima produzirá a seguinte saída:

A saída acima mostra a segunda cor no gradiente linear parando no ponto de 30% da primeira cor no gradiente, em vez de sua posição habitual, e porque a segunda cor também é a cor final no gradiente, ela se estende naturalmente para o fim.

Se você colocar 30% no código acima, no final da primeira cor, as coisas ficarão mais claras.

Personalizando um Gradiente Linear, Exemplo 2

Imagem de fundo: gradiente linear (para a direita, # 00A4CCFF 30%, # F95700FF);

O código acima produzirá a seguinte saída.

A saída acima mostra claramente a primeira cor no gradiente, parando no ponto de 30% da segunda cor no gradiente. Este exemplo, junto com o anterior, deve ajudar a tornar a personalização de interrupção de cores mais fácil de entender.

A personalização de um gradiente radial é feita da mesma forma que um gradiente linear. A única coisa que você precisa fazer para obter os mesmos resultados acima em um gradiente radial é alterar o tipo e a direção do gradiente.

Criar gradientes CSS nunca foi tão fácil

Este artigo tutorial fornece as ferramentas para identificar e criar gradientes lineares e radiais. Se você chegou até este ponto, aprendeu como alterar a direção e o centro de um gradiente. Além disso, agora você tem as habilidades para personalizar gradientes CSS e criar gradientes de fundo exclusivos.

No entanto, se você não quiser ir direto para a criação de gradientes novos e exclusivos, pode começar criando alguns gradientes pré-existentes de excelente aparência.

27 exemplos de gradientes de fundo CSS elegantes

As cores sólidas são tão antigas. Os gradientes chegaram! Mas como você os cria em CSS?

Leia a seguir

Sobre o autor

Expandir para ler a história completa