Borda com gradiente em CSS: quatro formas de a desenhar

Uma borda com gradiente em CSS é um contorno cuja cor se mistura ao longo do seu comprimento. O senão é que o border-color só aceita cores, não imagens, por isso não há uma propriedade única para isto. Em vez disso, desenhas o gradiente noutro lado e mostras só uma faixa fina dele. Há quatro formas fiáveis de o fazer, e a certa depende de duas perguntas: o elemento tem cantos redondos e o seu interior tem de ser transparente?

Método 1: border-image

O border-image aceita qualquer imagem, incluindo um gradiente. Define uma largura e um estilo de borda, depois o gradiente e depois uma fatia de 1, que diz ao navegador para usar a imagem toda como aresta. São duas linhas, funciona em todo o lado e deixa intacto o interior do elemento.

.panel {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}

Método 2: dois fundos com background-clip

Dá ao elemento uma borda transparente e depois empilha dois fundos. A camada de cima é o preenchimento interior, recortada à padding-box, por isso pára na aresta interior da borda. A camada de baixo é o gradiente, recortado à border-box, por isso estende-se por baixo da borda. Onde o preenchimento pára, o gradiente aparece, e segue perfeitamente o border-radius.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}

Este é o método a que recorrer por predefinição. O seu único limite é que o interior tem de ser opaco, porque um preenchimento transparente revelaria o gradiente por todo o cartão. Para cartões sobre uma cor de página lisa, isso não é limite nenhum: usa a cor da página como preenchimento.

Método 3: a técnica da máscara para interiores transparentes

Quando o cartão está sobre uma fotografia ou outro gradiente, o meio tem de ser transparente. Põe o gradiente num pseudoelemento que cubra o cartão, dá-lhe um preenchimento igual à largura da borda e depois mascara-o com duas camadas: uma que cobre só a caixa de conteúdo e outra que cobre tudo. Excluir uma da outra deixa visível só o anel de preenchimento.

.glass-card {
  position: relative;
  border-radius: 16px;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border width */
  border-radius: inherit;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

O pointer-events: none impede que o pseudoelemento engula os cliques destinados ao conteúdo do cartão. A referência do mask-composite da MDN explica as palavras-chave de composição. Este é o método por trás da maioria dos cartões de glassmorphism com arestas luminosas.

Método 4: um pseudoelemento por trás, para brilhos e animação

Coloca um pseudoelemento de gradiente ligeiramente maior do que o cartão, por trás do seu conteúdo, e cobre o meio com um segundo pseudoelemento que leve o preenchimento liso do cartão. A aresta visível é o gradiente. Como o gradiente vive na sua própria camada, podes desfocar uma cópia dele para um brilho, ou rodá-lo.

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

.ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed);
  animation: spin 6s linear infinite;
}

/* the card's fill, painted over the middle of the ring */
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0f172a;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ring::before { animation: none; }
}

O raio exterior deve ser igual ao raio interior mais a largura da borda, e é por isso que o pseudoelemento usa 18px à volta de um cartão de 16px. Para mais formas de pôr movimento nos gradientes, vê os gradientes animados em CSS.

Dicas de design para bordas com gradiente

As bordas com gradiente funcionam melhor como ênfase. A mesma lógica aplica-se aos botões, tratados em botões com gradiente em CSS.