CSS-achtergrondpatroon

De CSS-achtergrondpatroon-generator is een online tool die naadloze, pure CSS-achtergrondpatronen maakt met behulp van CSS-gradiënten. Het ondersteunt vijf patroontypen: stippen, raster, diagonaal, zigzag en golven. Alle patronen worden volledig met CSS gegenereerd — geen afbeeldingen nodig — waardoor ze lichtgewicht, schaalbaar en resolutie-onafhankelijk zijn.

Selecteer een patroontype uit het dropdown-menu en pas de voorgrondkleur, achtergrondkleur en patroongrootte aan met de besturingselementen. Het voorbeeldgebied wordt in realtime bijgewerkt zodat u precies kunt zien hoe uw patroon eruitziet. Als u tevreden bent, klikt u op de knop Kopiëren om de gegenereerde CSS-code naar het klembord te kopiëren.

Er zijn vijf patroontypen beschikbaar: Stippen (een herhalend cirkelpatroon met radial-gradient), Raster (een kruisraster met twee linear-gradient-lagen), Diagonaal (45-graden diagonale lijnen met repeating-linear-gradient), Zigzag (een zigzagpatroon met vier linear-gradient-lagen) en Golven (een golvend patroon met verschoven radial-gradient-cirkels).

Gebruik de voorgrondkleurkiezer om de lijn- of stipkleur van het patroon in te stellen en de achtergrondkleurkiezer voor de basiskleur achter het patroon. De grootteschuifregelaar bepaalt de afstand van de patroonherhaling — kleinere waarden creëren strakkere, dichtere patronen, terwijl grotere waarden meer uitgespreide ontwerpen opleveren. Experimenteer met verschillende kleurcombinaties en groottes.

De gekopieerde CSS-code kan direct in elk stylesheet of inline-stijl worden geplakt. Pas het toe op elk HTML-element via een klasse of inline-stijl. Deze patronen werken goed voor sectieachtergronden, kaartaccenten, hero-gebieden en decoratieve scheidingen. Omdat het pure CSS is, voegen ze geen extra HTTP-verzoeken toe en schalen ze perfect op alle schermdichtheden.