Upprepande linjär gradient i CSS: ränder, ringar och mönster

En repeating linear gradient i CSS upprepar en kort följd av färgstopp längs en linje tills den fyller elementet. Skriv repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) så får du diagonala rosa ränder, var och en 14 pixlar bred, utan bildfil. Längden på en upprepning bestäms av det sista stoppet, här 28px. Använd samma idé med repeating-radial-gradient() för ringar och repeating-conic-gradient() för strålar.

Så fungerar repeating-linear-gradient()

Syntaxen är identisk med en vanlig linjär gradient. Skillnaden är vad som händer efter det sista stoppet: i stället för att hålla den sista färgen börjar webbläsaren om mönstret. Två regler gör det mesta av jobbet.

• Det sista stoppets position är kakellängden. Stopp vid 0, 14px och 28px upprepas var 28:e pixel.
• Två färger på samma position ger en hård kant. #f472b6 0 14px, #fdf2f8 14px 28px hoppar från rosa till blekrosa vid 14px utan blandning.
• Varje stopp kan ta två positioner. #f472b6 0 14px betyder helt rosa från 0 till 14px, vilket är kortare än att skriva färgen två gånger.
• Använd längder, inte procent, för ränder. Procent är relativa till gradientlinjen, så ränderna sträcks när elementet ändrar storlek.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Randmönster att kopiera

Linjerat papper är ett bra exempel på en asymmetrisk upprepning: 22 pixlar papper, en pixel linje. Samma mönster med en röd marginallinje ovanpå ger ett övertygande anteckningsblock. Fler mönsteridéer, inklusive rutnät och prickar, finns i CSS-mönster.

Upprepande gradienter eller background-size

Du kan också göra ränder med en vanlig linear-gradient() och background-size, som kakelsätter en liten bild av gradienten. Båda fungerar. De beter sig olika i vinklar.

För allt diagonalt, ta den upprepande versionen först. För schackrutor och rutnät, där du behöver två riktningar samtidigt, är background-size med lagrade gradienter enklare.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}

Schackrutans andra färg startar på position 0. Ett stopp kan aldrig ligga före det föregående, så webbläsaren flyttar upp det till där den sista färgen slutade, vilket ger en hård kant utan att upprepa talet. Det är en praktisk genväg i vilken gradient som helst, upprepande eller inte.

Ringar med repeating-radial-gradient()

Den radiella versionen upprepas utåt från en mittpunkt, så ränder blir ringar. Flytta mitten med at för att göra krusningar som sprider sig från ett hörn. Som med radiella gradienter håller circle ringarna runda; standardellipsen sträcker dem mot rutan.

Strålar med repeating-conic-gradient()

Koniska gradienter sveper runt en punkt, så deras stopp är vinklar. Välj en upprepning som delar 360 jämnt, som 20, 30 eller 45 grader, annars blir den sista strålen en annan bredd än de andra. Håll de två färgerna nära varandra i ljushet för en bakgrund; strålar med hög kontrast vibrerar på skärmen och drar uppmärksamhet från allt annat. Hela syntaxen finns i koniska CSS-gradienter.

Så fixar du hackiga randkanter

Hårda kanter i vinkel kan se trappstegsformade ut, och vid vissa zoomnivåer renderar webbläsare dem ojämnt, så några ränder ser tjockare ut än andra. Lösningen är att ge varje kant en liten övergång i stället för ett perfekt hopp.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

En animerad frisörstolpe som förloppsstapel

Att flytta background-position exakt en upprepning får ränderna att färdas utan hopp. För ett 45-gradigt mönster med en upprepning på 28px är avståndet längs horisontalaxeln upprepningen delad med sinus för vinkeln, ungefär 39,6px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

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

För större animerade bakgrunder, se animerade CSS-gradienter, som går igenom billigare tekniker. Ränder och ringar är fina för detaljer, biljetter och laddningslägen. För en bakgrund folk känner igen som din tillför Gradiently-Marks material, ljus och korn som ett upprepande mönster inte kan, och de renderas i varje storlek du designar i.