Softonic

Rauschtextur-Generator

Schritt 1 / 2
Weiter

Eine Prise Rauschen kaschiert Banding, macht flächige Farbfüllungen weicher und lässt Verläufe im Interface weniger steril wirken. Dieser Generator erzeugt mit dem SVG-Filter feTurbulence eine quadratische Rauschtextur, die sich nahtlos kacheln lässt. Sie steuern Hintergrundfarbe, Deckkraft des Rauschens, Kornfrequenz und Rauschart und erhalten fertiges CSS: eine Hintergrundfarbe plus eine eingebettete SVG-Data-URI, die Sie direkt in Ihr Stylesheet einfügen.

So erzeugen Sie eine Rauschtextur

  1. 1

    Hintergrundfarbe wählen

    Das Korn liegt über dieser Farbe, beginnen Sie also mit der Fläche, die Sie tatsächlich einsetzen wollen.

  2. 2

    Deckkraft festlegen

    Von kaum sichtbar (2-5%) bis zu kräftigem Filmkorn (25% und mehr). Im Interface gewinnt fast immer die zurückhaltende Variante.

  3. 3

    Frequenz einstellen

    Eine höhere Basisfrequenz ergibt feines, dichtes Korn, eine niedrigere größere und weichere Flecken.

  4. 4

    Rauschart auswählen

    Fraktales Rauschen wirkt weich und natürlich, Turbulenz kontrastreicher und wolkiger.

  5. 5

    CSS kopieren

    Die Ausgabe besteht aus einer Hintergrundfarbe und einer eingebetteten SVG-Data-URI, bereit zum Einfügen in Ihr Stylesheet.

SVG-Rauschen mit feTurbulence

Am kompaktesten liefern Sie Rauschen mit SVG und einem Turbulenzfilter aus:

<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>

Binden Sie es als background-image: url("data:image/svg+xml,...") ein, und Sie erhalten wenige hundert Byte Markup, das jede Fläche kachelt, ganz ohne zusätzlichen HTTP-Request.

Empfohlene Einstellungen nach Anwendungsfall

Anwendungsfall Deckkraft Basisfrequenz Rauschart
UI-Panels im Dark Mode 3-5% 0,8-1,0 Fraktales Rauschen
Overlay über dem Hero-Verlauf 5-10% 0,7-0,9 Fraktales Rauschen
Karte mit Papieranmutung 8-15% 0,6-0,8 Fraktales Rauschen
Foto-Look mit Filmkorn 15-25% 0,9-1,2 Fraktales Rauschen
Korn eines Retro-Posters 25-40% 0,4-0,6 Turbulenz

Hinweise zur Performance

  • SVG-Turbulenz kommt in den meisten Browsern ohne GPU aus. Sie funktioniert in CSS-Hintergründen und wird günstig neu gezeichnet.
  • Nutzen Sie eine einzige Kachel. Der Generator liefert eine 200 x 200 große Kachel mit stitchTiles="stitch", sodass sie sich auch auf großen Flächen unmerklich wiederholt.
  • Animieren Sie Rauschen nicht. feTurbulence animiert ohne Änderung von baseFrequency schlecht, und die Performance bricht bei langen Sitzungen ein.
  • Legen Sie Rauschen über Verläufe. Korn mit 10% Deckkraft über einem CSS-Verlauf ergibt eine deutlich reichere Fläche als der Verlauf allein.

Häufig gestellte Fragen

Immer dann, wenn eine große einfarbige Fläche oder ein Verlauf zu clean wirkt. Hero-Bereiche, Modal-Hintergründe und dunkle UI-Panels gewinnen mit 3-10% Rauschen an Tiefe. Vermeiden Sie es in Textbereichen, dort leidet die Lesbarkeit.

Im feTurbulence-Filter von SVG liefert type="turbulence" den Absolutwert des Perlin-Rauschens (höherer Kontrast, wolkig), während type="fractalNoise" vorzeichenbehaftete Werte ergibt (weicheres, natürlicheres Korn). Für Interfaces ist fraktales Rauschen fast immer die richtige Wahl.

Nein. Der Generator gibt eine eingebettete SVG-Data-URI von wenigen hundert Byte direkt im CSS aus, es gibt also weder eine Bilddatei noch einen zusätzlichen Request. Zudem skaliert sie ohne Neuberechnung auf jede Fläche.

Ja. Auf Displays mit 8 Bit pro Kanal zeigen Verläufe bei geringem Kontrast sichtbare Streifen. Eine Rauschebene mit 2-3% dithert den Übergang und beseitigt das Banding auf Smartphones wie auf Monitoren.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

CSS-Scrollbar-Generator

Passen Sie das Erscheinungsbild der Bildlaufleiste per CSS an. Modernes scrollbar-color / scrollbar-width und das ältere ::-webkit-scrollbar für breite Browser-Unterstützung.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Tool in anderen Sprachen verfügbar