0

Como fazer bordas gradientes apenas com CSS

Junior Martins
Junior Martins

As bordas são comumente utilizadas em elementos HTML para criar um efeito de limitação, ou seja, para separar visualmente conteúdos.


Neste artigo você irá aprender a criar bordas em cores gradientes usando apenas CSS.


O que é o "efeito gradiente"?

Gradiente é a variação gradativa de uma cor para outra e é muito explorado na contrução de layouts de páginas e aplicativos web, pois, fazendo da forma correta, pode gerar efeitos visualmente agradáveis. Observe a imagem abaixo onde temos três exemplo de gradiente:


Agora que sabemos o que é gradiente, vamos colocar a mão na massa

Para se criar o efeito gradiente com CSS precisamos de apenas de duas propriedades e uma função, sendo:


Propriedades:

  • border
  • border-image


Função

  • linear-gradient


Border

As propriedades da borda CSS permitem que você especifique o estilo, a largura e a cor da borda de um elemento. Para mais informações sobre a propriedade border, acesse https://www.w3schools.com/css/css_border.asp


Border-image

Especifica uma imagem como a borda em torno de um elemento. Para mais informações sobre a propriedade border-image, acesse https://www.w3schools.com/cssref/css3_pr_border-image.asp


Linear-gradient

cria uma imagem que consiste em uma transição progressiva entre duas ou mais cores ao longo de uma linha reta. Para mais informações sobre a função linear-gradient, acesse https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()


Efeito vertical

Para criar o efeito vertical, passe para o primeiro parâmetro da função o valor "0deg" para um efeito de baixo para cima ou "180deg" para o efeito de cima para baixo. O resultado ficará assim:


Efeito horizontal

Para criar o efeito horizontal, passe para o primeiro parâmetro da função o valor "90deg" para o efeito da esquerda para a direita ou "270deg" para o efeito da direita para esquerda. O resultado ficará assim:


Efeito diagonal

Para criar o efeito diagonal, passe para o primeiro parâmetro da função o valor "45deg" para o efeito da diagonal de baixo na esquerda para cima na direita ou "45deg" para o efeito da direita para esquerda. O resultado ficará assim:


Para ver o efeito completo, acesse:

https://github.com/juniormartinxo/sandbox/tree/main/css/border-gradient

0
0

Comentários (3)

2
Caroline Franca

Caroline Franca

11/10/2021 17:37

Uau! Super interessante aplicar esse gradiente nas bordas, deixa o visual muito mais elegante e bonito.



1
Junior Martins

Junior Martins

09/10/2021 17:32

Obrigado e muito bacana este site Gradient Backgrounds, não conhecia.

2
Vinicius Pereira

Vinicius Pereira

09/10/2021 17:14

O artigo ficou bacana Junior. O uso de gradientes em bordas deixa um visual bem bonito.

Se alguém quiser, tem um site com vários gradientes: https://cssgradient.io/gradient-backgrounds/

None

Brasil