CSS-gradientram: fyra sätt att rita en

En gradientram i CSS är en kontur vars färg blandas längs dess längd. Haken är att border-color bara tar färger, inte bilder, så det finns ingen enskild egenskap för det. I stället ritar du gradienten någon annanstans och visar bara ett tunt band av den. Det finns fyra pålitliga sätt att göra det, och det rätta beror på två frågor: har elementet rundade hörn, och måste insidan vara genomskinlig?

Metod 1: border-image

border-image accepterar vilken bild som helst, även en gradient. Ange en ramtjocklek och stil, sedan gradienten och därefter en slice på 1, som talar om för webbläsaren att använda hela bilden som kant. Det är två rader, fungerar överallt och lämnar elementets insida orörd.

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

Metod 2: två bakgrunder med background-clip

Ge elementet en genomskinlig ram och stapla sedan två bakgrunder. Det översta lagret är den inre fyllningen, klippt till padding-box, så det slutar vid ramens insida. Det nedersta lagret är gradienten, klippt till border-box, så den sträcker sig under ramen. Där fyllningen slutar syns gradienten, och den följer border-radius perfekt.

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

Det här är metoden att välja som standard. Dess enda begränsning är att insidan måste vara ogenomskinlig, eftersom en genomskinlig fyllning skulle avslöja gradienten över hela kortet. För kort som ligger på en platt sidfärg är det ingen begränsning alls: använd sidfärgen som fyllning.

Metod 3: masktekniken för genomskinliga insidor

När kortet ligger över ett foto eller en annan gradient måste mitten vara genomskinlig. Lägg gradienten på ett pseudoelement som täcker kortet, ge det padding lika med ramens tjocklek och maska det sedan med två lager: ett som bara täcker innehållsboxen och ett som täcker allt. Om du utesluter det ena från det andra blir bara padding-ringen synlig.

.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 hindrar pseudoelementet från att svälja klick som är avsedda för kortets innehåll. MDN:s referens för mask-composite förklarar sammansättningsnyckelorden. Det här är metoden bakom de flesta glasmorfism-kort med lysande kanter.

Metod 4: ett pseudoelement bakom, för sken och animation

Placera ett gradientpseudoelement något större än kortet, bakom dess innehåll, och täck mitten med ett andra pseudoelement som håller kortets enfärgade fyllning. Den synliga kanten är gradienten. Eftersom gradienten ligger på ett eget lager kan du sudda en kopia av den för ett sken, eller rotera den.

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

Den yttre radien ska vara lika med den inre radien plus ramens tjocklek, vilket är varför pseudoelementet använder 18 px runt ett kort på 16 px. För fler sätt att få in rörelse i gradienter, se animerade gradienter i CSS.

Designtips för gradientramar

Gradientramar fungerar bäst som betoning. Samma logik gäller för knappar, som tas upp i gradientknappar i CSS.