Noise Verläufe: weiche Farbe mit körnigem Finish

Ein Noise Verlauf ist eine weiche Farbmischung mit einer feinen Schicht zufälligen Rauschens darüber, sodass die Farbe gedruckt statt gerendert wirkt. Die Mischung liefert Farbe und Lichtrichtung, das Rauschen liefert eine Oberfläche und verhindert, dass die Mischung in Streifen zerfällt. Unten findest du fünf Rezepte zum Kopieren und dann eine verständliche Erklärung jeder Generatoreinstellung, damit du eigene bauen kannst.

Fünf Rezepte für Noise Verläufe

Jedes Rezept besteht aus einem Grundverlauf und einer Rauscheinstellung. Die Verläufe siehst du hier ohne Rauschen, damit die Farbe erkennbar ist; die Tabelle darunter nennt das Rauschen, das obendrauf kommt. Sie unterscheiden sich bewusst: einer dunkel, einer hell, einer warm, einer kühl, einer kräftig.

Die Einstellungen eines Noise Generators erklärt

Jeder Verlaufsgenerator mit Rauschoption und jeder SVG Rauschfilter nutzt eine Version derselben Regler. Sobald du weißt, was jeder tut, kannst du jedes Rezept lesen und jedes Ergebnis korrigieren.

So machst du einen Noise Verlauf in CSS

Die sauberste Methode legt ein SVG Rauschbild in einer einzigen background Deklaration über deinen Verlauf und mischt beide. Tausch den Verlauf gegen ein beliebiges Rezept von oben und stell Frequenz und Deckkraft nach der Tabelle ein.

.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}

Die Sprenkelmethode mit hohem Kontrast

Für einen kräftigeren Look, fast wie Risografie, leg Rauschen und Verlauf in dieselbe Ebene und schick beide durch einen Kontrastfilter. Das Rauschen wird zu harten Sprenkeln zerdrückt, die dem Licht des Verlaufs folgen. Es ist lauter als Rezept 3, also nutze es für Plakate und Hero Banner, nicht hinter Fließtext.

.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}

Das richtige Rauschen für das Format

Rauschen ist relativ zur Fläche. Derselbe Filter wirkt auf einer Story am Handy fein und auf einem kleinen Banner grob, also passe die Frequenz an das Format an, statt überall dieselbe Datei zu nutzen.

• Stories und Posts: Frequenz um 0,8, Deckkraft 8 bis 14 Prozent. Etwas mehr, als du denkst, weil Uploads es weicher machen.
• Website Heroes: Frequenz 0,7 bis 0,9, Deckkraft 4 bis 10 Prozent. Siehe Hintergründe für Website Heroes.
• Plakate für den Druck: gröbere Körnung, Frequenz 0,5 bis 0,7 in der finalen Pixelgröße, damit sie den Druck übersteht.
• Dunkle Hintergründe: halbiere deine übliche Menge. Dunkle Verlaufshintergründe erklärt, warum Schatten Körnung zuerst zeigen.

Noise Verlauf oder Verlauf mit Körnung

Es ist dieselbe Idee mit anderer Betonung. Von Körnung spricht man, wenn man den Look meint, von Noise, wenn man meint, wie er entsteht. Verläufe mit Körnung erklärt, warum Körnung funktioniert und wo sie hingehört; diese Seite ist das Rezeptbuch. Willst du Textur ohne Farbmischung, fang stattdessen mit Körnungstextur an.

Wenn du überhaupt keine Regler abstimmen willst: Jeder Mark von Gradiently trägt seine eigene Einstellung für Körnung neben Farben, Licht und Bewegung und wird in jeder Größe frisch gerendert, sodass das Rauschen nie gestreckt oder unscharf wird. Gestalte kostenlos mit jedem nicht gesicherten Mark.