Como adicionar gradiente de borda em CSS [+3 Tools]

A propriedade border em CSS permite que os web designers especifiquem o estilo, a largura e a cor das bordas de um elemento.

Em CSS, um gradiente permite que um designer aplique uma transição suave entre duas ou mais cores. Você pode usar gradientes para criar efeitos visuais como sombreamento, mistura de cores e textura nos elementos de sua página da web.

Border gradient é uma propriedade CSS que permite aos desenvolvedores aplicar um gradiente à borda de um elemento.

Uma borda gradiente cria um efeito visual onde a cor da borda muda de uma cor para outra.

Por que usar uma borda de gradiente?

Os gradientes de borda estavam entre os vários recursos de estilo introduzidos no CSS3. Estas são algumas das razões pelas quais você deve tê-lo em seu próximo aplicativo da web:

  • Um gradiente de borda é flexível: você pode criar efeitos complexos e em camadas usando bordas de gradiente. Isso é diferente das bordas de cores sólidas, que são rígidas. As bordas gradientes são, portanto, úteis ao lidar com layouts complexos ou formas que exigem designs visuais diferenciados.
  • Crie apelo visual: usando o efeito de borda gradiente, você pode adicionar efeitos visuais atraentes aos seus designs. Por exemplo, você pode usar contrastes de cores em negrito para ajudar a chamar a atenção para um elemento específico em sua página da web.
  • Forneça integração perfeita: bordas de gradiente permitem que você integre perfeitamente a borda ao plano de fundo do seu elemento. Essa abordagem dá à sua página da Web uma aparência sólida e coesa, mostrando um design bem pensado.

Como adicionar gradiente de borda em CSS

Antes de demonstrarmos como adicionar um gradiente de borda, podemos ilustrar como adicionar uma borda a um elemento HTML.

  A pesquisa competitiva é mais fácil do que você pensa com a Semrush

Podemos usar este código;

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

    <title>Document</title>

</head>

<body>

      <div class="box contains-border">

        How to add a Border illustrated!!!

      </div>    

</body>

</html>

CSS

.box {

  width: 400px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.contains-border {

  border-color: rebeccapurple;

  border-style: solid;

  border-width: 5px;

}

A página renderizada aparecerá como:

Embora o código acima tenha uma borda, não é tão atraente aos olhos quanto está em branco. Temos apenas uma borda roxa Rebecca sólida de 5px ao redor de nosso div.

Podemos tornar nossa borda atraente usando gradientes de borda. Existem diferentes abordagens para adicionar um gradiente de borda. A seguir estão alguns dos principais:

Usando bordas de gradiente (gradiente linear, gradiente radial, gradiente cônico)

Vamos ilustrar como usar Gradient Borders de três maneiras diferentes:

Gradiente linear

Um gradiente linear cria uma transição suave entre duas ou mais cores em uma linha reta. Podemos usar o seguinte código para demonstrar:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Linear Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box linear-gradient">

        Linear Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.linear-gradient {

  border-style: solid;

  border-width: 10px;

  border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;

}

Especificamos o estilo da borda como sólido, o que significa que a borda ao redor da nossa caixa é uma linha sólida. A largura da borda em nosso código é 10px.

O gradiente linear começa com rgb(143, 55, 0)” e termina com “rgb(66, 228, 250)”. Também especificamos um ângulo de 45 graus. A largura da fatia da imagem da borda é definida como “1”.

A página renderizada aparecerá como:

gradiente radial

Um gradiente radial cria um gradiente circular irradiando de um ponto central, permitindo que os usuários façam a transição de uma cor para outra no elemento de uma página da web.

Podemos ilustrar como adicionar um gradiente radial usando este código:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Radial Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box radial-gradient">

        Radial Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.radial-gradient {

  border-style: solid;

  border-width: 5px;

  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

}

Definimos o estilo de borda do nosso elemento como sólido. Também demos à nossa borda uma largura de borda de 5px.

O gradiente radial começa com verde escuro RGB(0,143,104) e termina com amarelo brilhante, denotado por rgb(250,224,66).

  Como faço para cancelar a assinatura Starz na Amazon

O ‘1’ no final do código representa a propriedade border-image-repeat. Este valor instrui o navegador a repetir a imagem da borda apenas uma vez ao redor da borda do elemento.

A página renderizada aparecerá como:

Gradiente Cônico

Um gradiente cônico cria uma transição de cor circular. Nesse efeito, a transição parte de um ponto central e depois se espalha para fora, formando um efeito circular.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Conic Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box conic-gradient">

        Conic Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.conic-gradient {

  border-style: solid;

  border-width: 7.5px;

  border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;

}

Neste código, definimos o estilo da borda como sólido e damos à borda uma largura de 7,5px. A propriedade border-image define o gradiente da borda. Existem sete cores, começando com vermelho e terminando com rgb(255, 0, 38).

A figura ‘1’ no final do código dá a largura da borda de 1 pixel.

A página renderizada aparecerá como:

Usando imagens de borda

As imagens de borda substituem as bordas sólidas padrão dos elementos HTML. Imagens de borda são usadas para criar designs complexos em vez de combinar cores para criar um gradiente de borda.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Border Images Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box border-images">

        Border Images Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.border-images {

  border-style: solid;

  border-width: 15px;

  border-image-source: url(/images/elephant-2910293_1920.jpg);

  border-image-slice: 60 30;

}

Demos à nossa propriedade border-width uma largura de 15px e definimos o estilo de borda como sólido.

A fatia de imagem de borda define a largura e a altura da caixa de borda em 60% e 30%, respectivamente.

A página renderizada aparecerá como:

Usando propriedade abreviada

Uma propriedade abreviada permite que os desenvolvedores estilizem várias propriedades CSS individuais usando uma linha de código. Para este caso, usamos border-image para especificar border-image-source e border-image-slice.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Shorthand Property Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box shorthand">

        Shorthand Property Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.shorthand {

  border-style: solid;

  border-width: 15px;

  border-image: url(/images/elephant-2910293_1920.jpg) 60 30;

}

A página renderizada aparecerá como:

Geradores de gradiente de borda CSS

Os geradores de gradiente de borda CSS ajudam os desenvolvedores a adicionar efeitos de gradiente em elementos em uma página da web. Esses geradores permitem ajustar as configurações, o que significa que você não precisa criar tudo do zero. A seguir estão algumas das ferramentas que você pode usar:

  Você precisa de um monitor de alta taxa de atualização para o trabalho de escritório?

#1. Gerador de Gradiente CSS – Conversão de Cores

O Converting Colors permite gerar código CSS de gradiente linear ou radial com até cinco cores. O código de gradiente CSS que você gerou pode ser usado como borda ou imagem de fundo de um elemento.

Você pode fazer o seguinte com este gerador;

  • Selecione até cinco cores e use-as no gradiente da borda.
  • Escolha a direção do gradiente. A ferramenta tem gradientes lineares e radiais.
  • Você pode decidir como a transição de cores acontece usando o recurso de parada de cor.

Depois de terminar de experimentar e gerar o código, você pode copiá-lo e usá-lo em seu site.

#2. Gerador de gradiente de borda CSS – CSS não utilizado

Unused-CSS ajuda os desenvolvedores a gerar bordas de gradiente que podem ser aplicadas a elementos de bloco sem criar pseudo-elementos ou elementos extras.

Você pode fazer o seguinte;

  • Escolha entre diferentes tipos de gradiente. Você pode alternar facilmente entre gradientes radiais e lineares ao trabalhar com esta ferramenta.
  • Guia de visualização. A ferramenta permite que você visualize como o gradiente da borda aparecerá em sua página da Web conforme você a personaliza.
  • A cor pára. Essa ferramenta facilita a decisão de como as transições ocorrerão para cores diferentes.
  • Personalização do tamanho da borda. Você pode personalizar o tamanho e o raio da borda facilmente com esta ferramenta.

Quando estiver satisfeito com o código gerado, você pode copiá-lo e usá-lo em seu projeto.

#3. Gerador de Borda Gradiente – Amit Sheen

Essa ferramenta possui oito áreas de fundo diferentes, permitindo que os desenvolvedores criem efeitos de borda de gradiente arredondados.

Você pode conseguir o seguinte;

  • Crie animações de gradiente. A ferramenta permite gerar animações de gradiente que fazem a transição entre duas ou mais cores.
  • Você pode incluir código JavaScript. Se o seu elemento personalizável precisar de código JS, você sempre poderá localizá-lo e personalizá-lo no painel de controle.
  • Visualização ao vivo. Você pode visualizar as alterações em seu código à medida que o personaliza.

Você pode copiar e colar o código depois de personalizar seus efeitos de gradiente de borda ao seu gosto.

Conclusão

Ao projetar suas páginas da Web, você pode usar qualquer uma das abordagens acima para adicionar uma borda de gradiente aos seus elementos. A escolha da abordagem pode variar de acordo com a preferência, o nível de habilidade e a natureza do elemento que você está estilizando.

Você também pode usar diferentes abordagens para diferentes elementos na mesma página da web.

Confira como criar uma borda dupla em CSS para melhorar o apelo visual de sua página da web.