Tiny Online Tools logoTiny Online ToolssearchTools suchen…grid_viewAlle Tools
Startseitechevron_rightSVG-Toolschevron_rightKörniger Verlauf-GeneratorKörniger Verlauf-Generator

Körniger Verlauf-Generator

Erzeuge trendige körnig-verrauschte Verlaufshintergründe als reines SVG mit Kontrolle über Verlaufstyp, Stops, Körnungsintensität und Texturskala.

VerlaufstypLinearRadialFarbstops
KörnungAusgabe-AbmessungenResponsiv (an Container anpassen)Generierter CodecodeSVGbrushCSS
xml
css

Ahnliche Tools

SVG-Blob-Generator

SVG-Blob-Generator

Erstelle organische, zufällige Blob-Formen als sauberes SVG mit voller Kontrolle über Komplexität, Zufall, Farben und Verlaufsfüllungen.

SVG-Rausch-Textur-Generator

SVG-Rausch-Textur-Generator

Erzeuge kachelbare SVG-Rausch- und Körnungstexturen als reines SVG — perfekt für Overlays, Hintergründe und Filmkorn-Effekte.

Mesh-Verlauf-Generator

Mesh-Verlauf-Generator

Baue lebendige mesh-artige SVG-Verlaufhintergründe durch Mischen mehrerer radialer Farbpunkte — wie ein CSS-Mesh-Gradient.

10 PRINT Muster-Generator

10 PRINT Muster-Generator

Erzeuge das klassische Commodore-64-'10 PRINT'-Labyrinth-Muster als SVG — mit Kontrolle über Gitter, Farben und Strichstärke.

Hexdump-Generator

Hexdump-Generator

Erzeuge eine klassische Hexdump-Ansicht aus hochgeladenen Dateien.

PDF in Text

PDF in Text

Extrahiere Klartext sofort aus PDF-Dateien im Browser. Ohne Uploads und ohne Anmeldung.

PDF in Graustufen umwandeln

PDF in Graustufen umwandeln

Wandle ein farbiges PDF in Graustufen um, indem jede Seite gerendert und das Dokument neu aufgebaut wird.

apps

Mehr Tools

Durchsuchen Sie unsere vollstandige Sammlung kostenloser Online-Tools.

Moderne körnige Verläufe ohne Photoshop

Der "körnige Verlauf"-Look — ein weicher Verlauf, leicht mit Filmkorn-Rauschen bestäubt — ist überall im modernen Design zu finden: von Marketingseiten wie Linear bis zu Dutzenden hochwertiger Produktseiten. Dieser Generator liefert den Effekt als kompaktes, eigenständiges SVG, das auf jede Auflösung skaliert und keine Bilddatei benötigt.

So wird die Körnung angewendet

Intern komponiert das Werkzeug zwei Ebenen in einem einzigen SVG. Die Basisebene ist ein <rect> mit deinem Verlauf — linear oder radial, mit 2 bis 5 Farbstops. Darüber liegt ein zweites <rect>, dessen Füllung eine monochrome Rauschtextur ist, erzeugt vom SVG-Filter <feTurbulence type="fractalNoise">. Die Rauschebene wird mit einer einstellbaren Deckkraft gerendert — so entsteht der weiche, staubige Look.

Da alles über SVG-Filter läuft, bleibt das Korn in jeder Größe scharf und wiederholungsfrei — anders als bei einem gekachelten PNG siehst du keine Nähte, wenn der Hintergrund über eine riesige Hero-Fläche gestreckt wird.

Regler

  • Typ — linear (mit einstellbarem Winkel) oder radial.
  • Farbstops — 2 bis 5 Farben mit Positions-Slidern für präzise Übergangskontrolle.
  • Körnungsintensität — Deckkraft der Rauschebene. 0 deaktiviert das Korn; höhere Werte wirken zunehmend texturierter.
  • Körnungsskala — baseFrequency der Turbulenz. Niedrige Skala = grobes, taktiles Korn; hohe = feines, filmartiges Rauschen.
  • Oktaven — wie viele Rauschebenen gestapelt werden. Mehr Oktaven = mehr Detail.
  • Seed — Ganzzahl für Reproduzierbarkeit. Gleicher Seed = gleiches Korn-Muster.

Wo du es verwenden kannst

  • Hero-Hintergründe, die sich greifbar statt steril anfühlen
  • App-Startbildschirme und iOS-Widget-Karten
  • Product-Hunt-Style Launch-Banner
  • Musik- und Podcast-Cover
  • Dashboard-Karten mit subtiler Tiefe

SVG-Ausgabe ist bei ähnlicher Dateigröße stets schärfer als ein JPG, und seine Filter sind in allen modernen Browsern GPU-beschleunigt. Kopiere den Code, füge ihn in ein <div> ein und skaliere nach Belieben — das Korn bleibt auf allen Geräten und Zoomstufen erhalten.