CSS-baggrundsmønster-generator

Dette værktøj genererer gentagne baggrundsmønstre udelukkende med CSS-gradienter — ingen billedfiler nødvendige. Vælg polkaprikker, diagonale striber, skakternet eller gitterlinjer, justér farver og afstand, og kopiér background-image-CSS'en direkte ind i dit stylesheet.

Hvad er dette værktøj?

CSS kan tegne gentagne mønstre uden billedfiler ved hjælp af gradienter — radial-gradient() og linear-gradient() — som background-image, kombineret med en background-size, der er mindre end elementet, så gradienten fliselægges og gentager sig. Polkaprikker bruger en repeating-radial-gradient, striber og skakternede mønstre bruger gentagne eller lagdelte linear-gradient(), og gitterlinjer bruger to overlappende linear-gradient()-linjer.

Dette værktøj bygger disse gradienterklæringer for dig. Vælg en mønstertype, justér mønsterfarve, baggrundsfarve og afstand, og se den live forhåndsvisning opdatere sig — kopiér derefter den præcise background-image- og background-size-CSS.

Kilde: CSS Images Module Level 3, W3C — definerer repeating-linear-gradient() og repeating-radial-gradient(), de funktioner disse mønstre er bygget af.

Hvorfor bruge det?

Ingen billedfiler, ingen HTTP-forespørgsler — mønsteret er ren CSS og gengives øjeblikkeligt i enhver opløsning, inklusive retina/high-DPI-skærme.
Fuldt justerbar farve og afstand uden at skulle skrive gradientsyntaks eller regne fliselægningsmatematik i hånden.
Live forhåndsvisning viser det præcise gentagne mønster, før du kopierer noget.
Skalerer rent, da det er vektormatematik og ikke et rasterbillede — ingen udflydning, når elementet ændrer størrelse.
Kører helt i din browser — intet, du konfigurerer, uploades nogen steder.
Gratis, ingen tilmelding, virker på mobil.

Sådan bruger du det

Vælg en mønstertype: polkaprikker, diagonale striber, skakternet eller gitterlinjer.
Vælg mønsterfarven og den baggrundsfarve, der vises mellem/bag mønsterformerne.
Justér størrelses-skyderen for at gøre prikkerne, striberne eller gittercellerne større eller mindre — dette styrer også, hvor tæt mønsteret gentager sig.
Kopiér den genererede CSS, og indsæt den som background-image (og background-size/background-position, hvor vist) på et hvilket som helst element.

Eksempel

Input

Mønster: polkaprikker · Farve: blå · Baggrund: hvid · Størrelse: 24px

Output

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Et klassisk lyst polkaprikmønster, ofte brugt som en diskret sektionsbaggrund eller korttekstur.

Sådan bygges hvert mønster

Polkaprikker: en radial-gradient() tegner én lille udfyldt cirkel, hvorefter background-size gentager den som et fliselagt gitter af prikker.
Diagonale striber: en repeating-linear-gradient() i en 45-graders vinkel skifter mellem mønsterfarven og baggrundsfarven med et fast interval.
Skakternet: to overlappende 45-graders linear-gradient()-lag, forskudt fra hinanden med en halv flise, giver skiftevis lyse/mørke felter.
Gitterlinjer: to tynde linear-gradient()-linjer — én vandret, én lodret — fliselagt med den valgte afstand for at danne et gitter, ligesom millimeterpapir.

Hvornår du bør bruge CSS-mønstre frem for billedfiler

Et CSS-gradientmønster har ingen filstørrelse og kræver ingen HTTP-forespørgsel, så det indlæses øjeblikkeligt og ser aldrig sløret ud på high-DPI-skærme, i modsætning til en rasterbaseret PNG-baggrundsflise. Det er ideelt til diskrete teksturer bag tekst, sektionsafdelere, tomme-tilstands-illustrationer eller pladsholderkort. Til komplekse illustrerede eller fotografiske mønstre er et rigtigt billede stadig det rette værktøj — CSS-gradienter egner sig bedst til simple, geometriske, gentagne former som dem her.

Kombination med andre CSS-effekter

Mønstre fungerer godt som baggrund bag glassmorphism-kort, da sløringen har brug for noget med visuel tekstur bagved for at være synlig. De passer også naturligt sammen med afrundede hjørner på beholderelementet.

→ CSS-glassmorphism-generator · Border Radius-generator

Ofte stillede spørgsmål

Kræver disse mønstre nogen billedfiler?

Nej. Hvert mønster her genereres udelukkende med CSS-gradienter som background-image — der er ingen PNG, SVG eller anden fil involveret, så der er ingen ekstra HTTP-forespørgsel og ingen risiko for udflydning på skærme med høj opløsning.

Kan jeg ændre, hvor stort mønsteret er?

Ja — størrelses-skyderen styrer background-size, som fastsætter, hvor stor én gentaget flise af mønsteret er. En mindre størrelse pakker prikkerne, striberne eller gittercellerne tættere sammen; en større størrelse spreder dem ud.

Hvorfor bruger skakternet-mønsteret to gradienter?

En enkelt linear-gradient() kan kun skifte farve i én retning. At lægge to 45-graders gradienter oven på hinanden, forskudt fra hinanden med en halv flise, er det, der giver de skiftevise lyse/mørke felter i et skakternet mønster — dette er standardteknikken til rent CSS-baserede skakternede mønstre.

Vil dette mønster se skarpt ud på retina/high-DPI-skærme?

Ja. Fordi mønsteret er en matematisk gradient frem for et bitmapbillede, gengives det i den opløsning, skærmen kræver, uden opskalering eller udflydning — i modsætning til en lille rasterbaseret billedflise, der strækkes eller gentages ved høj pixeltæthed.

Kan jeg bruge disse mønstre som en fuld sidebaggrund?

Ja — anvend den genererede background-image, background-size og background-position (hvor til stede) på body eller ethvert fuldbredt beholderelement. Hold øje med kontrast: et livligt mønster med høj kontrast bag brødtekst kan skade læsbarheden, så lettere/mere diskrete indstillinger som regel fungerer bedre til store baggrundsområder.