Softonic

Ruistextuur-generator

Stap 1 / 2
Volgende

Een vleugje ruis verbergt banding, verzacht vlakke kleurvlakken en zorgt dat gradiënten in je interface minder steriel aanvoelen. Deze generator bouwt met het SVG-filter feTurbulence een vierkante ruistextuur die naadloos herhaalt, met instellingen voor achtergrondkleur, dekking van de ruis, korrelfrequentie en ruistype. Je krijgt kant-en-klare CSS terug: een achtergrondkleur plus een inline SVG data-URI die je zo in je stylesheet plakt.

Zo maak je een ruistextuur

  1. 1

    Kies de achtergrondkleur

    De korrel komt over deze kleur heen, dus begin bij het oppervlak dat je echt gaat gebruiken.

  2. 2

    Stel de dekking in

    Van nauwelijks zichtbaar (2-5%) tot zware filmkorrel (25% en meer). In een interface wint subtiel het bijna altijd.

  3. 3

    Regel de frequentie

    Een hogere basisfrequentie geeft fijne, dichte korrel; een lagere geeft grotere, zachtere vlekken.

  4. 4

    Kies het ruistype

    Fractale ruis is zacht en natuurlijk. Turbulentie geeft meer contrast en een wolkig beeld.

  5. 5

    Kopieer de CSS

    De uitvoer is een achtergrondkleur plus een inline SVG data-URI, klaar om in je stylesheet te plakken.

SVG-ruis met feTurbulence

De compactste manier om ruis mee te leveren is SVG plus een turbulentiefilter:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Zet het inline als background-image: url("data:image/svg+xml,...") en je hebt een paar honderd bytes markup die over elk oppervlak herhaalt, zonder extra HTTP-verzoek.

Aanbevolen instellingen per toepassing

Toepassing Dekking Basisfrequentie Ruistype
UI-panelen in donkere modus 3-5% 0,8-1,0 Fractale ruis
Laag over de gradiënt van een hero 5-10% 0,7-0,9 Fractale ruis
Kaart met papiergevoel 8-15% 0,6-0,8 Fractale ruis
Foto met filmkorrel 15-25% 0,9-1,2 Fractale ruis
Korrel van een retroposter 25-40% 0,4-0,6 Turbulentie

Aandachtspunten voor prestaties

  • SVG-turbulentie heeft in de meeste browsers geen GPU nodig. Het werkt in CSS-achtergronden en wordt goedkoop opnieuw getekend.
  • Hergebruik één tegel. De generator levert een tegel van 200 x 200 met stitchTiles="stitch", zodat de herhaling op een groot scherm onzichtbaar blijft.
  • Animeer ruis niet. feTurbulence animeert slecht zonder een wijziging van baseFrequency, en de prestaties zakken in bij langere sessies.
  • Leg ruis over gradiënten. Korrel met 10% dekking bovenop een CSS-gradiënt geeft een veel rijker oppervlak dan de gradiënt alleen.

Veelgestelde vragen

Zodra een groot vlak kleurvlak of een gradiënt te schoon aanvoelt. Hero-secties, achtergronden van modals en donkere UI-panelen krijgen diepte met 3-10% ruis. Vermijd het in tekstvlakken, waar het de leesbaarheid schaadt.

In het feTurbulence-filter van SVG levert type="turbulence" de absolute waarde van de Perlin-ruis (meer contrast, wolkig), terwijl type="fractalNoise" waarden met teken geeft (zachtere, natuurlijkere korrel). Voor interfaces wil je vrijwel altijd fractale ruis.

Nee. De generator levert een inline SVG data-URI van een paar honderd bytes, rechtstreeks in de CSS, dus er is geen afbeeldingsbestand en geen extra verzoek. Bovendien schaalt hij naar elk oppervlak zonder kwaliteitsverlies.

Ja. Op schermen met 8 bits per kanaal kunnen gradiënten bij weinig contrast zichtbare banden vertonen. Een ruislaag van 2-3% dithert de overgang en laat de banding verdwijnen, zowel op telefoons als op monitoren.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

Changelog-generator

Maak een markdown-sectie in Keep a Changelog-stijl op basis van gecategoriseerde items. Plak de items onder Added, Changed, Fixed en Removed, kies Markdown of platte tekst en kopieer de uitvoer.

Tool beschikbaar in andere talen