Patroonachtergrond-generator

Pure CSS, geen afbeeldingsbestanden

Elk patroon hier wordt getekend met CSS-gradiënten boven op een effen background-color. Er is niets te hosten en geen extra HTTP-verzoek: de hele textuur zit in de stylesheet. Een stippenpatroon ziet er bijvoorbeeld zo uit:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

De CSS herhaalt het motief over de achtergrond. De afstand bepaalt hoe dicht het patroon is, maar verandert niet de dikte van elke lijn of de grootte van elke stip. Bij bepaalde zoomniveaus of gebroken apparaatpixels kunnen zeer fijne randen tussen herhalingen zichtbaar worden.

Waar elk motief van gemaakt is

Tips voor kleur en contrast

• Houd het contrast laag voor achtergronden. Een patroonkleur dicht bij de achtergrondkleur leest als een subtiele, professionele textuur. Hoog contrast concurreert met je eigenlijke inhoud.
• Sluit aan bij je merk. Gebruik een merkkleur als patroonkleur in plaats van gewoon grijs, zodat de textuur bij je identiteit past.
• Donkere modus. Wissel naar een donkere achtergrondkleur en een iets lichtere patroonkleur. Patronen met vol contrast ogen rommelig op donkere vlakken.
• Controleer tekst op beide kleuren. Weinig contrast tussen de achtergrondkleuren garandeert niet dat tekst voldoende contrasteert. Test de tekstkleur op zowel de basiskleur als de patroonkleur. Deze tool controleert niet op WCAG-conformiteit.

Waar je het gebruikt

• Kop- en sectieachtergronden die wat textuur nodig hebben zonder een afbeelding.
• Kaarten en panelen in een dashboard, waar een subtiel raster of stippen structuur toevoegen.
• Lege statussen en tijdelijke aanduidingen, waar een dambord een herkenbaar visueel signaal geeft.
• Layouts in printstijl en slides die om een ruitjespapier- of arceringgevoel vragen.

Omdat de uitvoer alleen uit CSS bestaat, is geen afzonderlijk afbeeldingsverzoek nodig. Je kunt de code daarna aanpassen in de ontwikkelaarstools van je browser.