Trianglify UI
Erzeuge algorithmische Low-Poly-Dreieck-Hintergründe als SVG oder PNG — mit Farb-Paletten, Seed und Export. Der Einstieg zu Manual, Beispielen und Tipps.
Low-Poly-Hintergründe in Sekunden
Trianglify UI erzeugt algorithmisch generierte Low-Poly-Dreieck-Hintergründe — diese geometrischen Flächen aus farbverlaufenden Dreiecken, die man von Hero-Bereichen, Login-Seiten und App-Hintergründen kennt. Du stellst ein paar Regler ein, klickst auf Generate Pattern und bekommst sofort ein fertiges Muster, das du als SVG oder PNG herunterlädst oder direkt als Data-URL kopierst.
Das Problem, das es löst: Solche Hintergründe von Hand in einem Grafik-Programm zu bauen, ist mühsam und schlecht reproduzierbar. Trianglify UI nimmt dir das ab — gleicher Seed, gleiches Muster, jederzeit wieder herstellbar. Statt eine Bilddatei durch die Gegend zu schieben, kannst du das Ergebnis als kompaktes SVG in dein CSS einbetten.
Gedacht ist das Tool für alle, die schnell einen ansprechenden Hintergrund brauchen: Web-Entwicklerinnen und -Entwickler, die einen Hero- oder Karten-Hintergrund direkt als CSS-background einbinden wollen; Designerinnen und Designer, die Varianten für ein Moodboard durchprobieren; und alle, die ein Wallpaper, ein Präsentations-Hintergrundbild oder eine Social-Grafik in hoher Auflösung exportieren möchten. Kein Account, keine Installation, kostenlos.
Was du einstellen kannst
Die Steuerung sitzt links in einer Settings-Karte, die Vorschau füllt den Rest:
- Seed — ein optionaler Startwert für den Zufallsgenerator. Gleicher Seed plus gleiche Einstellungen ergeben exakt dasselbe Muster — die Grundlage für reproduzierbare Ergebnisse. Ein Klick auf das Shuffle-Symbol erzeugt einen zufälligen 8-stelligen Seed.
- Color Palette — eine von 27 benannten ColorBrewer-Paletten (18 sequenzielle wie Blues, Greens, YlOrRd, plus 9 divergierende wie Spectral, RdYlBu) oder der Modus Random.
- Use custom color gradient — alternativ ein eigener Farbverlauf aus Start- und End-Farbe, die du über einen Farb-Wähler (Coloris) bestimmst. Damit baust du Muster in deinen Marken-Farben.
- Cell Size — die Zell-Größe von 20 bis 200 px: kleine Werte ergeben viele feine Dreiecke, große Werte wenige, großflächige.
- Variance — die Varianz von 0 bis 1,5: bei 0 ein regelmäßiges Gitter, je höher der Wert, desto unregelmäßiger und „zerklüfteter" das Muster.
Jede Änderung rendert die Vorschau sofort neu. Welche Werte genau welchen Effekt haben, steht im Manual.
Export und Einbettung
Aus jedem Muster bekommst du drei Ausgaben:
- Download PNG und Download SVG in wählbarer Export-Auflösung — von HD über Full HD (Standard) und QHD bis 4K, oder eine eigene Größe bis 8192 px.
- Base64-Data-URLs für PNG und SVG zum Kopieren — ideal, um das Muster ohne separate Bilddatei direkt als CSS-
background-imageeinzubetten.
SVG ist dabei für Web-Hintergründe meist die bessere Wahl: vektorbasiert, skalierbar und bei diesen Mustern oft kleiner als ein PNG. PNG nimmst du, wenn du ein klassisches Bitmap brauchst, etwa fürs Wallpaper oder eine Präsentation.
Alles im Browser — nichts verlässt dein Gerät
Trianglify UI ist rein clientseitig: Es gibt keinen Server-Roundtrip, kein API und keinen Upload. Das Muster entsteht vollständig in deinem Browser über die quelloffene Bibliothek Trianglify.js (von Quinn Rohlf, GPL-3.0). Was du erzeugst, bleibt auf deinem Gerät, bis du es selbst herunterlädst oder kopierst.
Jetzt ausprobieren
→ Trianglify UI öffnen — Palette wählen, Regler schieben, Generate Pattern klicken und als SVG oder PNG herunterladen. Ohne Account, kostenlos, direkt im Browser.
Verwandte JPKCom-Tools
Für andere Hintergründe und passende Farben:
- GeoPattern — geometrische SVG-Hintergrund-Muster aus einem Text-Seed, eine andere Mustersprache als die Dreiecke.
- Colors — Farb-Wähler, Verlauf-Generator und Paletten-Extraktor, um die Start- und End-Farben für deinen eigenen Verlauf zu finden.
Tiefer geht es auf den Unterseiten: das Manual mit jeder Option und jedem Wertebereich, Beispiele aus der Praxis und gesammelte Tipps & Tricks.