Carregando...

Como colocar borda gradiente css

Postado: 8 de janeiro de 2023

Como colocar borda gradiente css

Os gradientes CSS permitem exibir transições suaves entre duas ou mais cores especificadas.

CSS define três tipos de gradientes:

  • Gradientes lineares (vai para baixo/para cima/esquerda/direita/diagonalmente)
  • Gradientes radiais (definidos pelo seu centro)
  • Gradientes cônicos (girados em torno de um ponto central)

Os Gradientes são elementos CSS do tipo de dados de imagem que mostram uma transição entre duas ou mais cores. Essas transições são mostradas como lineares ou radiais

Veremos neste tutorial como colocar borda gradiente com css, baseada na propriedade background-clip, que é compatível com a propriedade border-radius.

Os valores padding-box e border-box especificados após os gradientes lineares representam os valores do clipe de fundo.

porém seja um gradiente falso, usando a mesma cor duas vezes. estamos usando para mascarar o segundo gradiente de fundo com a cor de fundo. 

O segundo gradiente fica abaixo do primeiro e é usado para aplicar as cores de gradiente desejadas. Ao contrário do primeiro, o segundo gradiente cobre a área da borda (background-clip: border-box).

Finalmente, a borda transparente é necessária para separar a caixa de borda da caixa de preenchimento (caso contrário, elas seriam idênticas e o primeiro gradiente cobriria completamente o segundo).

Vamos Adicionar o Html

 <div class="box-btn">
   <a href="#" class="botao-gradient">Veja mais</a>
 </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o Botão e dar o efeito de gradiente na borda.

.box-btn {

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;

}

.botao-gradient {
  
	background: linear-gradient(white, white) padding-box, linear-gradient(to right, #13f78c, #0be6e6, #f700c5) border-box;
	border-radius: 50em;
	border: 3px solid transparent;
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #10a87d;
	padding: 0.5em 1.5em;
	cursor: pointer;

}

Combinando as Duas seções acima Html + Css temos o seguinte Resultado!

Como criar bordas de gradiente em CSS.

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

4.303 Visualizações

2 respostas para “Como colocar borda gradiente css”

  1. loopnerd disse:

    Olá Kellly!
    que bom que gostou, você pode mudar as cores tbm do jeito que você quiser.
    Obrigado pela visita no BLOG.

  2. Kelly Ernesto disse:

    Adorei, deu certinho do jeitinho que eu queria!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados