Borda com gradiente em CSS: quatro jeitos de desenhar uma

Uma borda com gradiente em CSS é um contorno cuja cor se mistura ao longo do comprimento. O problema é que o border-color só aceita cores, não imagens, então não existe uma propriedade única para isso. Em vez disso, você desenha o gradiente em outro lugar e mostra só uma faixa fina dele. Há quatro jeitos confiáveis de fazer isso, e o certo depende de duas perguntas: o elemento tem cantos arredondados e o interior dele precisa ser transparente?

Método 1: border-image

O border-image aceita qualquer imagem, inclusive um gradiente. Defina a largura e o estilo da borda, depois o gradiente e depois um corte de 1, que diz ao navegador para usar a imagem inteira como borda. São duas linhas, funciona em todo lugar e deixa o interior do elemento intocado.

.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 empilhe dois fundos. A camada de cima é o preenchimento interno, recortada no padding-box, então para na borda interna. A camada de baixo é o gradiente, recortado no border-box, então se estende por baixo da borda. Onde o preenchimento para, o gradiente aparece, e ele segue o border-radius perfeitamente.

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

Esse é o método a usar por padrão. O único limite é que o interior precisa ser opaco, já que um preenchimento transparente revelaria o gradiente no card inteiro. Para cards sobre uma cor lisa de página, isso não é limite nenhum: use a cor da página como preenchimento.

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

Quando o card fica sobre uma foto ou outro gradiente, o meio precisa ser transparente. Coloque o gradiente em um pseudoelemento que cubra o card, dê a ele um padding igual à largura da borda e mascare-o com duas camadas: uma cobrindo só a caixa de conteúdo e outra cobrindo tudo. Excluir uma da outra deixa visível apenas o anel do padding.

.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 card. A referência de mask-composite do MDN explica as palavras-chave de composição. Esse é o método por trás da maioria dos cards de glassmorphism com bordas brilhantes.

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

Coloque um pseudoelemento de gradiente um pouco maior que o card, atrás do conteúdo, e cubra o meio com um segundo pseudoelemento com o preenchimento sólido do card. A borda visível é o gradiente. Como o gradiente fica em uma camada própria, você pode desfocar uma cópia dele para um brilho, ou girá-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 externo deve ser igual ao raio interno mais a largura da borda, e é por isso que o pseudoelemento usa 18px em volta de um card de 16px. Para mais jeitos de pôr movimento em gradientes, veja gradientes animados em CSS.

Dicas de design para bordas com gradiente

As bordas com gradiente funcionam melhor como ênfase. A mesma lógica vale para os botões, tratados em botões com gradiente em CSS.