CSS Achtergrondpatroon Generator

Deze tool genereert herhalende achtergrondpatronen met alleen CSS-gradients — er zijn geen afbeeldingsbestanden nodig. Kies polkastippen, diagonale strepen, een schaakbord of rasterlijnen, pas de kleuren en tussenruimte aan en kopieer de background-image CSS direct naar je stylesheet.

Wat is deze tool?

CSS kan herhalende patronen tekenen zonder afbeeldingsbestanden door gradients te gebruiken — radial-gradient() en linear-gradient() — als background-image, gecombineerd met een background-size die kleiner is dan het element zodat de gradient tegelt en herhaalt. Polkastippen gebruiken een repeating radial-gradient, strepen en schaakborden gebruiken repeating of gelaagde linear-gradient(), en rasterlijnen gebruiken twee overlappende linear-gradient()-lijnen.

Deze tool bouwt die gradient-declaraties voor je. Kies een patroontype, pas de patroonkleur, achtergrondkleur en tussenruimte aan en bekijk hoe het live voorbeeld bijwerkt — kopieer daarna de exacte background-image en background-size CSS.

Bron: CSS Images Module Level 3, W3C — definieert repeating-linear-gradient() en repeating-radial-gradient(), de functies waarop deze patronen zijn gebouwd.

Waarom gebruiken?

Geen afbeeldingsbestanden, geen HTTP-verzoeken — het patroon is pure CSS en rendert direct op elke resolutie, ook op retina-/high-DPI-schermen.
Volledig aanpasbare kleur en tussenruimte zonder gradientsyntax met de hand te schrijven of tegelwiskunde te berekenen.
Live voorbeeld toont het exacte herhalende patroon voordat je iets kopieert.
Schaalt netjes doordat het vectorwiskunde is, geen rasterafbeelding — geen vervaging wanneer het element van grootte verandert.
Draait volledig in je browser — niets van wat je configureert wordt ergens naartoe geüpload.
Gratis, geen aanmelding, werkt op mobiel.

Hoe te gebruiken

Kies een patroontype: polkastippen, diagonale strepen, schaakbord of rasterlijnen.
Kies de patroonkleur en de achtergrondkleur die tussen/achter de patroonvormen zichtbaar is.
Pas de grootteschuif aan om de stippen, strepen of rastercellen groter of kleiner te maken — dit bepaalt ook hoe dicht het patroon zich herhaalt.
Kopieer de gegenereerde CSS en plak hem als de background-image (en background-size/background-position waar getoond) van elk element.

Voorbeeld

Invoer

Patroon: polkastippen · Kleur: blauw · Achtergrond: wit · Grootte: 24px

Uitvoer

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

Een klassiek licht polkastippenpatroon, vaak gebruikt als subtiele sectieachtergrond of kaarttextuur.

Hoe elk patroon is opgebouwd

Polkastippen: een radial-gradient() tekent één klein gevuld cirkeltje, waarna background-size dit laat herhalen als een tegelraster van stippen.
Diagonale strepen: een repeating-linear-gradient() onder een hoek van 45 graden wisselt met een vast interval tussen de patroonkleur en de achtergrondkleur.
Schaakbord: twee overlappende linear-gradient()-lagen van 45 graden, een halve tegel ten opzichte van elkaar verschoven, produceren afwisselend lichte/donkere vakjes.
Rasterlijnen: twee dunne linear-gradient()-lijnen — één horizontaal, één verticaal — herhaald op de gekozen tussenruimte om een raster te vormen, vergelijkbaar met ruitjespapier.

Wanneer CSS-patronen gebruiken in plaats van afbeeldingsbestanden

Een CSS-gradientpatroon heeft geen bestandsgrootte en geen HTTP-verzoek, dus laadt het direct en oogt het nooit wazig op high-DPI-schermen, in tegenstelling tot een gerasterde PNG-achtergrondtegel. Ideaal voor subtiele texturen achter tekst, sectiescheidingen, lege-toestand-illustraties of placeholder-kaarten. Voor complexe geïllustreerde of fotografische patronen blijft een echte afbeelding het juiste middel — CSS-gradients zijn het meest geschikt voor eenvoudige, geometrische, herhalende vormen zoals hier.

Combineren met andere CSS-effecten

Patronen werken goed als achtergrond achter glassmorphism-kaarten, omdat de blur iets met visuele textuur erachter nodig heeft om zichtbaar te zijn. Ze combineren ook van nature met afgeronde hoeken op het omringende element.

→ CSS Glassmorphism Generator · Border Radius Generator

Veelgestelde vragen

Zijn er afbeeldingsbestanden nodig voor deze patronen?

Nee. Elk patroon hier wordt puur met CSS-gradients gegenereerd als background-image — er is geen PNG, SVG of ander bestand bij betrokken, dus geen extra HTTP-verzoek en geen risico op vervaging op hoge-resolutieschermen.

Kan ik aanpassen hoe groot het patroon is?

Ja — de grootteschuif regelt background-size, wat bepaalt hoe groot één herhalende tegel van het patroon is. Een kleinere grootte plaatst de stippen, strepen of rastercellen dichter op elkaar; een grotere grootte spreidt ze uit.

Waarom gebruikt het schaakbordpatroon twee gradients?

Eén linear-gradient() kan kleuren maar in één richting laten afwisselen. Twee gradients van 45 graden over elkaar leggen, verschoven ten opzichte van elkaar met een halve tegel, produceert de afwisselende lichte/donkere vakjes van een schaakbord — dit is de standaardtechniek voor puur CSS-schaakborden.

Ziet dit patroon er scherp uit op retina-/high-DPI-schermen?

Ja. Omdat het patroon een wiskundige gradient is in plaats van een bitmapafbeelding, wordt het gerenderd op welke resolutie het scherm ook nodig heeft, zonder opschalen of vervaging — in tegenstelling tot een klein rasterafbeeldingstegeltje dat wordt uitgerekt of herhaald bij hoge pixeldichtheid.

Kan ik deze patronen als volledige paginaachtergrond gebruiken?

Ja — pas de gegenereerde background-image, background-size en background-position (waar aanwezig) toe op de body of elk containerelement over de volledige breedte. Houd rekening met contrast: een druk, contrastrijk patroon achter tekst in de body kan de leesbaarheid schaden, dus lichtere/subtielere instellingen werken meestal beter voor grote achtergrondgebieden.