CSS-kleurverloopborder: vier manieren om er een te tekenen

Een CSS-kleurverloopborder is een contour waarvan de kleur langs zijn lengte overloopt. Het addertje is dat border-color alleen kleuren accepteert, geen afbeeldingen, dus er is geen enkele eigenschap voor. In plaats daarvan teken je het kleurverloop elders en toon je slechts een dunne band ervan. Er zijn vier betrouwbare manieren, en de juiste hangt af van twee vragen: heeft het element afgeronde hoeken, en moet de binnenkant transparant zijn?

Methode 1: border-image

border-image accepteert elke afbeelding, ook een kleurverloop. Stel een borderbreedte en -stijl in, dan het kleurverloop, dan een slice van 1, die de browser vertelt de hele afbeelding als rand te gebruiken. Het is twee regels, werkt overal en laat de binnenkant van het element ongemoeid.

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

Methode 2: twee achtergronden met background-clip

Geef het element een transparante border en stapel dan twee achtergronden. De bovenste laag is de binnenvulling, begrensd tot de padding-box, dus hij stopt bij de binnenrand van de border. De onderste laag is het kleurverloop, begrensd tot de border-box, dus hij loopt onder de border door. Waar de vulling stopt, verschijnt het kleurverloop, en het volgt border-radius perfect.

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

Dit is de methode om standaard te pakken. De enige beperking is dat de binnenkant ondoorzichtig moet zijn, want een transparante vulling zou het kleurverloop over de hele kaart tonen. Voor kaarten op een effen paginakleur is dat helemaal geen beperking: gebruik de paginakleur als vulling.

Methode 3: de maskertechniek voor transparante binnenkanten

Als de kaart over een foto of een ander kleurverloop ligt, moet het midden doorzichtig zijn. Zet het kleurverloop op een pseudo-element dat de kaart bedekt, geef het padding gelijk aan de borderbreedte en maskeer het met twee lagen: één die alleen de content box bedekt en één die alles bedekt. De ene van de andere uitsluiten laat alleen de paddingring zichtbaar.

.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 voorkomt dat het pseudo-element klikken opslokt die voor de inhoud van de kaart bedoeld zijn. De MDN-referentie voor mask-composite legt de compositiesleutelwoorden uit. Dit is de methode achter de meeste glassmorphism-kaarten met gloeiende randen.

Methode 4: een pseudo-element erachter, voor gloed en animatie

Plaats een kleurverloop-pseudo-element iets groter dan de kaart, achter de inhoud, en bedek het midden met een tweede pseudo-element met de effen vulling van de kaart. De zichtbare rand is het kleurverloop. Omdat het kleurverloop op een eigen laag leeft, kun je er een kopie van vervagen voor een gloed, of hem roteren.

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

De buitenste straal moet gelijk zijn aan de binnenste straal plus de borderbreedte, en daarom gebruikt het pseudo-element 18px rond een kaart van 16px. Voor meer manieren om beweging in kleurverlopen te brengen, zie geanimeerde CSS-kleurverlopen.

Ontwerptips voor kleurverloopborders

Kleurverloopborders werken het best als nadruk. Dezelfde logica geldt voor knoppen, behandeld in kleurverloopknoppen in CSS.