Tiny Online Tools
Weiche, verträumte Hintergründe ohne schwere Bilder
Unscharfe, bunte Hintergründe — oft als „Aurora" oder „abstrakte Verläufe" bezeichnet — sind zum Standard für Landingpages, Dashboards und App-Startbildschirme geworden. Statt eines schweren PNGs erzeugt dieser Generator ein paar SVG-Ellipsen, die mit einem feGaussianBlur-Filter weichgezeichnet werden: das Ergebnis bleibt in jeder Auflösung scharf, wiegt nur wenige Kilobyte und nutzt die GPU des Browsers optimal aus.
Wie es funktioniert
Das Werkzeug verteilt einige Ellipsen zufällig in einem 800×600-viewBox über eine Seed-basierte Zufallsfunktion. Jede Ellipse erhält eine Farbe aus deiner Palette. Die gesamte Gruppe wird in einen SVG-Filter eingebettet, der eine starke Gauß-Unschärfe anwendet — stark genug, dass die einzelnen Formen ineinander verschmelzen und der typische weiche, wolkige Look entsteht.
Regler
- Formen — wie viele unscharfe Ellipsen gezeichnet werden. Mehr Formen geben reichere, vollere Hintergründe.
- Unschärfe — Stärke des Gauß-Filters. Wenig Unschärfe lässt die Formen getrennt; viel Unschärfe verschmilzt alles zu einem Verlauf.
- Größenvarianz — wie stark die Größen variieren.
- Palette — bis zu fünf eigene Farben. Füge welche hinzu oder entferne sie, um zu deiner Marke zu passen.
- Hintergrund — eine Volltonfarbe hinter den unscharfen Formen.
- Seed + Neu würfeln — würfle neu, um andere Anordnungen zu probieren; derselbe Seed liefert immer dasselbe Ergebnis.
Häufige Einsatzzwecke
- Hero-Hintergründe
- Moderne App-Startbildschirme
- OG-/Social-Share-Bilder
- Preis-Sektion-Hintergründe
- Kartenhintergründe auf Marketingseiten
Dank preserveAspectRatio="none" passt sich das SVG mit width: 100% an jeden Container an. Füge die Ausgabe direkt in HTML, React oder Designwerkzeuge ein — oder passe die Farben später in einem Texteditor an.