Construindo uma borda gradiente em um card

Olá, seja muito bem vindo(a), no artigo de hoje nós vamos aprender a criar uma borda gradiente em um card simples. Primeiro devemos construir o card no nosso html, sendo que utilizaremos duas divs, uma dentro da outra, dessa forma:

<div class="card-after">

 <div class="card">

 </div>

</div>

  No css teremos que colocar na div externa uma cor de fundo gradiente e uma largura e altura definidos, um espaçamento interno de 5px e por fim podemos deixar a borda arredondada só por estilização.

.card-after {

 background: linear-gradient(to left, #2bf791 0%, #53b0ea 100%);

 width: 190px;

 height: 254px;

 padding: 5px;

 border-radius: 1rem;

}

  Na div interna colocamos um background de cor sólida, aqui eu adicionei preto, uma largura e uma altura com 10 pixels a menos, adicionei um espaçamento interno de 10px, e arredondei a borda assim como o externo.

.card {

 background: #000;

 width: 180px;

 height: 244px;

 padding: 10px;

 border-radius: 1rem;

}

  Por fim, teremos nosso card, não foquei no design dele porque o tutorial seria para ensinar a colocar uma borda gradiente, mas você pode adicionar conteúdo nesse card dentro da div interna, sendo que a div externa funciona só para colocar o gradiente. Deixo um abraço e até a próxima.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/construindo-uma-borda-gradiente-em-um.html