Start Debugging
DE
2026-05-01 css Edit on GitHub

CSS-Verlaufshintergrund mit Textur/Noise

Wie Sie in CSS texturierte, noisy Gradient-Hintergründe erstellen, indem Sie über die background-image-Eigenschaft Gradient- und Noise-Bildebenen kombinieren.

Von Marius Bughiu · 1 Min. Lesezeit ·

Texturierte Verlaufshintergründe entstehen durch die Kombination von Gradients und Noise-Bildern. Für CSS-Gradients können Sie einen Generator wie diesen verwenden. Für Noise-Bilder können Sie ebenfalls diesen Noise-Generator nutzen.

Der Trick für texturierte Hintergründe liegt darin, die CSS-Background-Eigenschaften zu kombinieren. Statt nur Gradients oder nur Bilder als Hintergrund zu verwenden, warum nicht beides kombinieren, etwa so:

background-image: url('../images/noise.png'), -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background-image: url('../images/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background-image: url('../images/noise.png'), -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background-image: url('../images/noise.png'), -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background-image: url('../images/noise.png'), -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background-image: url('../images/noise.png'), linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */

Ja, das geht. Nutzen Sie einfach die background-image-Eigenschaft wie gewohnt, fügen Sie ein Komma hinzu und dann einen Gradient. Verwenden Sie den Noise-Generator, um das Bild zu erzeugen, und den Gradient-Generator, um Ihren gewünschten Gradient zu erstellen.

Hier ist eine vollständige, eigenständige Variante, die Sie in eine HTML-Datei einfügen können — sie nutzt Inline-SVG-Rauschen als Daten-URL, sodass keine externen Bildabhängigkeiten bestehen:

<!doctype html>
<html>
<head>
  <style>
    body {
      min-height: 100vh;
      margin: 0;
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>"),
        linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
    }
  </style>
</head>
<body></body>
</html>

Der gleiche Trick funktioniert mit jedem Gradient — führen Sie das Rauschen (oder ein beliebiges Texturbild) als erstes im kommagetrennten background-image-Wert auf, um es über dem Gradient zu stapeln.

Comments

Sign in with GitHub to comment. Reactions and replies thread back to the comments repo.

< Zurück