Bordo a gradiente in CSS: quattro modi per disegnarlo

Un bordo a gradiente in CSS è un contorno il cui colore si sfuma lungo la sua lunghezza. Il problema è che border-color accetta solo colori, non immagini, quindi non esiste una proprietà unica per farlo. Il gradiente si disegna invece altrove e se ne mostra solo una sottile fascia. Ci sono quattro modi affidabili per farlo, e quello giusto dipende da due domande: l’elemento ha angoli arrotondati? E il suo interno deve essere trasparente?

Metodo 1: border-image

border-image accetta qualsiasi immagine, gradiente compreso. Imposta spessore e stile del bordo, poi il gradiente, poi uno slice di 1, che dice al browser di usare l’intera immagine come bordo. Sono due righe, funziona ovunque e lascia intatto l’interno dell’elemento.

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

Metodo 2: due sfondi con background-clip

Dai all’elemento un bordo trasparente, poi sovrapponi due sfondi. Il livello superiore è il riempimento interno, ritagliato sul padding-box, quindi si ferma al bordo interno. Il livello inferiore è il gradiente, ritagliato sul border-box, quindi si estende sotto il bordo. Dove si ferma il riempimento compare il gradiente, e segue alla perfezione border-radius.

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

È il metodo da scegliere per impostazione predefinita. Il suo unico limite è che l’interno deve essere opaco, perché un riempimento trasparente rivelerebbe il gradiente su tutta la scheda. Per le schede su un colore di pagina uniforme non è affatto un limite: usa il colore della pagina come riempimento.

Metodo 3: la tecnica della maschera per interni trasparenti

Quando la scheda sta sopra una foto o un altro gradiente, il centro deve essere trasparente. Metti il gradiente su uno pseudo-elemento che copre la scheda, dagli un padding pari allo spessore del bordo, poi maschera con due livelli: uno che copre solo il content box e uno che copre tutto. Escludere l’uno dall’altro lascia visibile solo l’anello del 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;
}

pointer-events: none impedisce allo pseudo-elemento di inghiottire i clic destinati al contenuto della scheda. Il riferimento MDN su mask-composite spiega le parole chiave di composizione. È il metodo dietro la maggior parte delle schede glassmorphism con i bordi luminosi.

Metodo 4: uno pseudo-elemento dietro, per aloni e animazione

Metti uno pseudo-elemento a gradiente leggermente più grande della scheda, dietro il suo contenuto, e copri il centro con un secondo pseudo-elemento che contiene il riempimento pieno della scheda. Il bordo visibile è il gradiente. Poiché il gradiente vive su un livello proprio, puoi sfocarne una copia per ottenere un alone, oppure ruotarlo.

@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; }
}

Il raggio esterno dovrebbe essere uguale al raggio interno più lo spessore del bordo, ed è per questo che lo pseudo-elemento usa 18px attorno a una scheda da 16px. Per altri modi di dare movimento ai gradienti, vedi i gradienti animati in CSS.

Consigli di design per i bordi a gradiente

I bordi a gradiente funzionano meglio come enfasi. Lo stesso ragionamento vale per i pulsanti, trattati in pulsanti a gradiente in CSS.