Grainy Gradients

Stöbern Sie durch Dribbble oder Behance, und Sie werden Designer finden, die eine einfache Technik verwenden, um einem Bild Textur hinzuzufügen: Rauschen. Das Hinzufügen von Rauschen lässt ansonsten solide Farben oder glatte Verläufe, wie Schatten, realistischer erscheinen. Aber trotz der Vorliebe der Designer für Textur wird Rauschen im Webdesign selten verwendet.

In diesem Artikel generieren wir buntes Rauschen, um einem Verlauf mit nur wenig CSS und SVG Textur zu verleihen. Nun, machen wir etwas Lärm!

Interaktiver Spielplatz

Schauen Sie es sich hier an. Der schnellste Weg, um zu verstehen, was passiert, ist, mit den Parametern zu spielen, die die Ebenen bilden.

Der Trick: SVG-Rauschen und CSS-Verläufe

Die Kerntechnik dieses Artikels baut auf einer Stack Overflow-Antwort von Chris Pachl auf die Frage auf: Kann man einem CSS-Verlauf Rauschen hinzufügen?

Der Trick besteht darin, einen SVG-Filter zu verwenden, um das Rauschen zu erzeugen, und dieses Rauschen dann als Hintergrund anzuwenden. Legen Sie es unter einen Verlauf, erhöhen Sie Helligkeit und Kontrast, und das ist es – Sie haben einen Verlauf, der allmählich ausdithert.

Die Schlüsselzutaten

Hier ist, womit wir unter der Haube arbeiten

• SVG-Turbulenz: Das ist unser Rauschfilter.
• Hintergrund mit Verlauf und SVG: Als Nächstes fügen wir diesen Filter als Hintergrundbild in CSS ein, das den Filter mit einem CSS-Verlauf kombiniert.
• Helligkeit und Kontrast erhöhen: Dann verwenden wir den CSS-filter, um die Helligkeit und den Kontrast des Rauschens zu erhöhen.
• Verläufe mischen: Schließlich verwenden wir optional mix-blend-mode, um Farben weiter herauszufiltern und Verläufe miteinander zu mischen.

Lassen Sie uns auf jeden dieser Teile im Detail eingehen.

SVG-Turbulenz verwenden

Im Bereich SVG können wir Filter definieren, und ein solcher Filter ermöglicht es uns, Perlin-Rauschen zu erzeugen. Er heißt <feTurbulence> und wir können Attribute definieren, wie z. B., ob es sich um "Turbulenz" oder "Rauschen" handelt und wie fein oder grob es ist. Bence Szabó erklärt es viel detaillierter, während er demonstriert, wie es zur Erstellung von Mustern verwendet werden kann.

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

Dieses SVG-Beispiel erstellt einen Filter und rendert ein <rect>-Element, das wir für unsere körnigen Verläufe verwenden können. Beachten Sie, dass der SVG-<filter> vom <rect> getrennt definiert ist und das <rect> einfach darauf verweist.

Spielen Sie herum und ändern Sie einige der Eigenschaften von <feTurbulence>.

Wir speichern dieses SVG als separate Datei. Wir verweisen auf einen externen Link, um das SVG in den Demos in diesem Artikel zu laden. In der Praxis würden Sie jedoch auf eine lokale Datei oder Ihren eigenen CDN verweisen. Es funktioniert aus einem seltsamen Grund nicht, auf das SVG über seine id in CSS zu verweisen, aber Sie können das SVG inline einfügen, wie wir in der Playground-Demo zeigen. Wir tun dies in den Demos aus Gründen der Lesbarkeit nicht.

Einen CSS-background mit SVG und einem Verlauf erstellen

Nachdem wir die SVG-Datei irgendwo gespeichert haben, auf die wir über eine URL oder einen Pfad verweisen können, können wir sie nun in einem CSS-background verwenden, kombiniert mit einem Verlauf.

.noise {
  /* ... */
  background:
    linear-gradient(to right, blue, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
}

Die Reihenfolge ist hier wichtig. In diesem speziellen Beispiel möchten wir, dass eine Volltonfarbe (d. h. kein Rauschen) in Rauschen und dann in eine andere Farbe übergeht. Wir möchten auch, dass ein Ende des Verlaufs transparent ist, damit das Rauschen durchscheint.

So wie das

Das ist jedoch nicht besonders schön, da das Rauschen zu unruhig ist. Wir müssen es ausfransen und körniger machen. Das können wir tun, indem wir…

Helligkeit und Kontrast erhöhen

Das Hinzufügen eines CSS-filter macht das Rauschen deutlicher, indem die am wenigsten verblassten Farben zu Weiß oder Schwarz verschoben werden. Der Filter wirkt auf das gesamte <div>, sodass das linkeste Blau ein anderes Blau ist als das reine Blau, mit dem wir begonnen haben.

.noise {
  /* ... */
  background: 
    linear-gradient(to right, blue, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);  
}

Sie können mit der Auswirkung von Kontrast und Helligkeit auf den Verlauf experimentieren. Das Erhöhen von Helligkeit und Kontrast drängt die unruhigen Grautöne im folgenden Demo heraus.

Das Rauschen ist nicht farblich einheitlich

Wenn Sie hineinzoomen, werden Sie feststellen, dass das Rauschen aus vielen Farben besteht. Der SVG-Filter war von Anfang an farbenfroh, und die Erhöhung von Helligkeit und Kontrast hat bestimmte Farben hervorgehoben. Obwohl kaum wahrnehmbar, können wir, wenn dieses Konfetti unerwünscht ist, Farben weiterhin mit CSS-Blending herausfiltern (d. h. mit mix-blend-mode und background-blend-mode).

CSS-Blending

Lassen Sie uns einen körnigen Verlauf erstellen, der zwischen zwei Farben übergeht. CSS-Blending ermöglicht es uns, Farbschichten zu stapeln. Im nächsten Beispiel fügen wir ein weiteres <div> zum Markup hinzu, positionieren es über dem ursprünglichen Verlauf und wenden dann mix-blend-mode: multiply; an, um die Dinge zu glätten.

<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>

.noise {
  /* ... */
  background: 
    linear-gradient(20deg, rebeccapurple, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg); 
  contrast(170%) brightness(1000%);
}
.overlay {
  /* ... */
  background: moccasin;
  mix-blend-mode: multiply;
}

Wir können die CSS-Eigenschaft isolation verwenden, um einen neuen Stapelkontext zu erstellen und auszuwählen, was gemischt wird. Wenn wir isolation im nächsten Beispiel weglassen würden, würden der Verlauf und die Überlagerung mit der Hintergrundfarbe gemischt werden. Probieren Sie es im Pen aus und kommentieren Sie diese Zeile aus!

/* Same as before */

.isolate {
  isolation: isolate;
  /* ... */
}

Einige Anwendungsfälle

Wir haben uns ein ziemlich einfaches Beispiel angesehen, wie man einen verrauschten Verlauf erstellt, aber wo könnte man ihn einsetzen? Betrachten wir mehrere Anwendungsfälle.

Licht und Schatten, mit Korn

Wo treten Verläufe natürlich auf? Zum Beispiel Licht und Schatten. Wir können die CSS-Eigenschaft mix-blend-mode nutzen, um Verläufe sanft zu mischen und gezielt die Farben herauszufiltern, die wir im Rauschen sehen wollen.

Im "Schatten"-Beispiel erstellen wir einen dunklen Verlauf und invertieren ihn, um den Effekt im "Licht"-Beispiel zu erzielen. In beiden Fällen ermöglicht uns mix-blend-mode, ihn mit anderen Verläufen zu mischen.

Holografische Folie

Die drastische Erhöhung von Helligkeit und Kontrast erzeugt einen Regenbogeneffekt, der an holografische Folie erinnert.

Dinge weiterführen

Probieren Sie den Spielplatz aus und experimentieren Sie mit den verschiedenen Parametern, um zu sehen, wie sie die Textur beeinflussen.

Darüber hinaus gibt es hier einige Möglichkeiten, mit dieser Technik weiter zu experimentieren:

• Ein anderes SVG verwenden: Alle Verläufe in diesem Artikel verwenden dasselbe SVG, aber Sie können mit den Parametern spielen, die das Rauschen erzeugen, um die Grobheit sowie das Aussehen und Gefühl im Spielplatz anzupassen.
• Andere Verläufe ausprobieren: Neben linear-gradient bietet CSS vier weitere Arten von Verläufen. Können Sie sie nennen? (Hier ist einer.)
• Mehr Ebenen hinzufügen: Mit CSS-Blending können Sie so viele Ebenen wie gewünscht stapeln und nach unten mischen.
• Andere SVG-Filter anwenden: Es gibt alle Arten von Filtern, einschließlich Gaußscher Weichzeichnung und verschiedener Beleuchtungsarten. Außerdem können sie in einem CSS-Filter referenziert und auf *jedes* Element angewendet werden, zusätzlich zu SVG.

Was fällt Ihnen noch ein? Bitte lassen Sie uns in den Kommentaren wissen, was Sie entdecken.

Browser-Unterstützung

Wir können nicht umhin, über Browser-Unterstützung zu sprechen. Der Kern dieser Technik wird von allen modernen Browsern unterstützt. Wie Sie vielleicht erwarten, funktioniert sie nicht im Internet Explorer. Das gesagt, unterstützt der Internet Explorer SVG als Hintergrund in CSS (nur nicht mit der eigentlichen CSS-filter-Eigenschaft).

SVG als CSS-Hintergrundbild

CSS-Filtereffekte

Ich habe auch bemerkt, dass Blink-basierte Browser (z. B. Chrome) und WebKit-basierte Browser (z. B. Safari) mix-blend-mode leicht unterschiedlich implementieren, daher testen Sie bitte browserspezifisch, wenn Sie CSS-Blending verwenden. In meinen eigenen Projekten habe ich browser-spezifische Media Queries verwendet, um die visuellen Unterschiede mit kleinen Anpassungen an CSS manuell auszugleichen.

---

Das war's! Nachdem Sie nun einen Überblick über SVG-Filter und deren Kombination mit CSS-Filtern als Hintergrund haben, steht Ihnen ein weiterer netter visueller Effekt zur Verfügung, um einem Design Tiefe und Textur zu verleihen.