CSS Patroon Generator
Genereer pure CSS-achtergrondpatronen direct. Kies stippen, lijnen, raster, dambord of diagonaal — kopieer de CSS en gebruik het overal.
① Kies een patroontype ② Pas grootte en kleuren aan ③ Kopieer de CSS-uitvoer
Patroonkleur
#C9B89A
Achtergrondkleur
#0E0E0E
Hoe het werkt
Elk patroon is opgebouwd met pure CSS-verlopen — geen afbeeldingen, geen SVG. Stippen gebruiken radial-gradient, lijnen en diagonaal gebruiken repeating-linear-gradient, het raster gebruikt twee gekruiste linear-gradients, en het dambord gebruikt conic-gradient.
Grootte-instelling
De grootte-schuifregelaar stelt de background-size-tegel in. Grotere tegels creëren een ijler patroon; kleinere tegels creëren een dichtere textuur.
Alleen CSS
De gegenereerde CSS gebruikt alleen background-image en background-size, waardoor het compatibel is met elk HTML-element en alle moderne browsers.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
Wat is een CSS-achtergrondpatroon?
CSS-achtergrondpatronen zijn herhalende visuele texturen die volledig zijn gemaakt met CSS-verlopen — geen afbeeldingen nodig. Met radial-gradient, linear-gradient en conic-gradient kun je stippen, lijnen, rasters, damborden en diagonale strepen produceren die naadloos herhalen. Deze techniek wordt ondersteund in alle moderne browsers en genereert geen extra HTTP-verzoeken.
Veelgestelde vragen
Een CSS-achtergrondpatroon is een herhalende visuele textuur die volledig is gegenereerd met CSS-gradiëntfuncties — geen afbeeldingen of SVG nodig. Door radial-gradient, linear-gradient, repeating-linear-gradient en conic-gradient te combineren met background-size, maak je naadloze stippen, lijnen, rasters, damborden en diagonale strepen.
Het stippenpatroon gebruikt radial-gradient om een klein gevuld cirkeltje in het midden van elke tegel te tekenen, met transparante vulling voor de rest. Door background-size in te stellen op de tegelafmetingen herhalen de stippen zich in een regelmatig raster.
Het lijnenpatroon gebruikt een enkele repeating-linear-gradient in één richting en creëert parallelle horizontale lijnen. Het rasterpatroon gebruikt twee loodrechte linear-gradients bovenop elkaar en creëert een kruisraster.
De conic-gradient-functie creëert een rotatie van vier kwarten waarbij afwisselende kwarten worden gevuld met de patroon- of achtergrondkleur. Door background-size in te stellen op het dubbele van de tegelgrootte vormen de vier kwarten een perfect dambord.
Alle vijf patronen gebruiken gradiëntfuncties die worden ondersteund in alle moderne browsers. Het conic-gradient voor het dambord vereist Chrome 69+, Firefox 83+ en Safari 12.1+.
Kopieer de gegenereerde CSS en pas het toe op elk HTML-element. Je kunt het inline toevoegen via het style-attribuut of in een CSS-klasse. Voor een achtergrond op volledige pagina pas je het toe op body of een vast div.
De tool ondersteunt 5 patroontypen: stippen, lijnen, raster, dambord en diagonaal. Elk is configureerbaar met een willekeurige tegelgrootte (4–40px) en volledig aangepaste kleuren.