CSS-bakgrundsmönstergenerator

Det här verktyget genererar upprepande bakgrundsmönster med enbart CSS-gradienter — inga bildfiler behövs. Välj polkaprickar, diagonala ränder, ett schackmönster eller rutnätslinjer, justera färger och avstånd, och kopiera background-image-CSS:en rakt in i din stilmall.

Vad är detta verktyg?

CSS kan rita upprepande mönster utan några bildfiler genom att använda gradienter — radial-gradient() och linear-gradient() — som ett background-image, kombinerat med en background-size som är mindre än elementet så att gradienten kaklas och upprepas. Polkaprickar använder en repeating-radial-gradient, ränder och schackrutor använder repeating- eller staplade linear-gradient(), och rutnätslinjer använder två överlappande linear-gradient()-linjer.

Det här verktyget bygger de gradientdeklarationerna åt dig. Välj en mönstertyp, justera mönsterfärg, bakgrundsfärg och avstånd, och se förhandsvisningen uppdateras i realtid — kopiera sedan den exakta background-image- och background-size-CSS:en.

Källa: CSS Images Module Level 3, W3C — definierar repeating-linear-gradient() och repeating-radial-gradient(), funktionerna dessa mönster byggs av.

Varför använda det?

Inga bildfiler, inga HTTP-anrop — mönstret är ren CSS och renderas direkt i valfri upplösning, inklusive retina-/högupplösta skärmar.
Fullt justerbar färg och avstånd utan att handskriva gradientsyntax eller räkna ut kaklingsmatematik.
Förhandsvisning i realtid visar det exakta upprepande mönstret innan du kopierar något.
Skalar rent eftersom det är vektormatematik, inte en rasterbild — ingen suddighet när elementet ändrar storlek.
Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans.
Gratis, ingen registrering, fungerar på mobilen.

Så använder du det

Välj en mönstertyp: polkaprickar, diagonala ränder, schackrutor eller rutnätslinjer.
Välj mönsterfärgen och bakgrundsfärgen som visas mellan/bakom mönsterformerna.
Justera storleksreglaget för att göra prickarna, ränderna eller rutnätscellerna större eller mindre — det styr också hur tätt mönstret upprepas.
Kopiera den genererade CSS:en och klistra in den som background-image (och background-size/background-position där visat) för valfritt element.

Exempel

Inmatning

Mönster: polkaprickar · Färg: blå · Bakgrund: vit · Storlek: 24px

Resultat

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

Ett klassiskt ljust polkaprick-mönster som ofta används som en diskret sektionsbakgrund eller korttextur.

Hur varje mönster byggs

Polkaprickar: en radial-gradient() ritar en liten fylld cirkel, och sedan får background-size den att upprepas som ett kaklat rutnät av prickar.
Diagonala ränder: en repeating-linear-gradient() i 45 graders vinkel alternerar mellan mönsterfärgen och bakgrundsfärgen med ett fast intervall.
Schackrutor: två överlappande linear-gradient()-lager i 45 grader, förskjutna från varandra med en halv ruta, ger alternerande ljusa/mörka rutor.
Rutnätslinjer: två tunna linear-gradient()-linjer — en horisontell, en vertikal — kaklade med valt avstånd för att bilda ett rutnät, liknande rutat papper.

När du ska använda CSS-mönster istället för bildfiler

Ett CSS-gradientmönster har ingen filstorlek och inget HTTP-anrop, så det laddas direkt och blir aldrig suddigt på högupplösta skärmar, till skillnad från en rastrerad PNG-bakgrundskakla. Det passar perfekt för diskreta texturer bakom text, sektionsavdelare, illustrationer för tomma tillstånd eller platshållarkort. För komplexa illustrerade eller fotografiska mönster är en riktig bild fortfarande rätt verktyg — CSS-gradienter passar bäst för enkla, geometriska, upprepande former som de här.

Kombinera med andra CSS-effekter

Mönster fungerar bra som bakgrund bakom glassmorphism-kort, eftersom oskärpan behöver något med visuell textur bakom sig för att synas. De passar även naturligt ihop med rundade hörn på behållarelementet.

→ CSS Glassmorphism Generator · Border Radius-generator

Vanliga frågor

Kräver de här mönstren några bildfiler?

Nej. Varje mönster här genereras helt med CSS-gradienter som ett background-image — det finns ingen PNG-, SVG- eller annan fil inblandad, så det blir inget extra HTTP-anrop och ingen risk för suddighet på högupplösta skärmar.

Kan jag ändra hur stort mönstret är?

Ja — storleksreglaget styr background-size, som anger hur stor en upprepande kakla av mönstret är. En mindre storlek packar prickarna, ränderna eller rutnätscellerna tätare; en större storlek sprider ut dem.

Varför använder schackmönstret två gradienter?

En enda linear-gradient() kan bara alternera färger i en riktning. Att stapla två 45-graders gradienter, förskjutna från varandra med en halv ruta, är det som ger de alternerande ljusa/mörka rutorna i ett schackmönster — det här är standardtekniken för rena CSS-schackmönster.

Kommer mönstret att se skarpt ut på retina-/högupplösta skärmar?

Ja. Eftersom mönstret är en matematisk gradient snarare än en bitmappsbild, renderas det i vilken upplösning skärmen än behöver, utan uppskalning eller suddighet — till skillnad från en liten rasterbildskakla som sträcks ut eller upprepas vid hög pixeltäthet.

Kan jag använda de här mönstren som en helsidig bakgrund?

Ja — applicera det genererade background-image, background-size och background-position (där de finns) på body eller valfritt fullbredds-behållarelement. Tänk på kontrasten: ett livligt, högkontrastmönster bakom brödtext kan försämra läsbarheten, så ljusare/mer diskreta inställningar fungerar oftast bättre för stora bakgrundsytor.