Trianglify UI
Low-Poly-Dreieck-Hintergründe im Browser: Paletten oder eigener Verlauf, Stile, Drahtgitter, PNG/JPEG/WebP/SVG, CSS und teilbarer Link. Der Einstieg zur Doku.
Low-Poly-Hintergründe in Sekunden
Trianglify UI erzeugt algorithmisch generierte Low-Poly-Dreieck-Hintergründe — diese geometrischen Flächen aus farbverlaufenden Dreiecken, wie du sie von Hero-Bereichen, Login-Seiten und App-Hintergründen kennst. Du schiebst ein paar Regler, die Vorschau folgt live, und das fertige Muster lädst du als PNG, JPEG, WebP oder SVG herunter, kopierst es als CSS-Zeile oder teilst es als Link.
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 — jedes Muster hat einen Seed, gleicher Seed plus gleiche Einstellungen ergeben dasselbe Muster, jederzeit wieder herstellbar. Und der Download ist exakt das Bild aus der Vorschau, nur in voller Größe. Statt eine Bilddatei durch die Gegend zu schieben, kannst du das Ergebnis als SVG direkt 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 (auf dem Smartphone steht die Vorschau oben):
- Seed — der Startwert für den Zufallsgenerator. Gleicher Seed plus gleiche Einstellungen ergeben exakt dasselbe Muster. Ist das Feld leer, setzt das Tool selbst einen; das Shuffle-Symbol würfelt einen neuen 8-stelligen Seed.
- Colour palette — eine von 27 ColorBrewer-Paletten (18 sequenzielle wie Blues oder Greens, 9 divergierende wie Spectral oder Red-Yellow-Blue) oder Random (from the seed). Mit Vertical gradient wählst du auf Wunsch eine zweite Palette für die vertikale Achse.
- Own two-colour gradient — alternativ ein eigener Farbverlauf aus Start- und End-Farbe, die du über einen Farb-Wähler (Coloris) oder als Hex-Wert bestimmst. Damit baust du Muster in deinen Marken-Farben.
- Style — glatter Verlauf (Smooth gradient), zufälliges Farbflirren (Sparkle) oder zufällige Abdunklung (Shadows), die beiden Effekte mit regelbarer Stärke.
- Cell size — die Zell-Größe von 10 bis 400 px, bezogen auf die Exportgröße: 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.
- Line width und Wireframe — Kanten nachzeichnen oder nur die Umrisse auf transparentem Grund ausgeben.
Jede Änderung rendert die Vorschau sofort neu, Schieberegler schon beim Ziehen. Welche Werte genau welchen Effekt haben, steht im Manual.
Export und Einbettung
Die Größe wählst du vorab — das Muster wird direkt in dieser Größe berechnet, die Vorschau zeigt es nur verkleinert. Daraus bekommst du:
- PNG, JPEG, WebP und SVG als Download in einer der Vorgaben — HD, Full HD (Standard), QHD, 4K, Open Graph (1200 × 630), X header (1500 × 500), Square und Phone wallpaper (1080 × 1920) — oder in einer eigenen Größe von 16 bis 8192 px. Rasterbilder auf Wunsch in doppelter Pixeldichte für Retina-Displays.
- Copy CSS — eine fertige
background-image-Zeile mit dem Muster als SVG-Data-URI. - Copy link — eine Adresse, die alle Einstellungen enthält; wer sie öffnet, sieht dasselbe Muster.
- Data URIs für SVG und PNG zum Kopieren, mit Größenangabe.
SVG ist für Web-Hintergründe meist die bessere Wahl: vektorbasiert, skalierbar und bei gröberen Mustern kompakt. PNG, JPEG oder WebP nimmst du, wenn du ein klassisches Bitmap brauchst, etwa fürs Wallpaper, eine Präsentation oder ein Social-Media-Vorschaubild.
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). Die Einstellungen stehen nur in der Adresse der Seite, gespeichert wird nichts. Was du erzeugst, bleibt auf deinem Gerät, bis du es selbst herunterlädst, kopierst oder den Link teilst.
Jetzt ausprobieren
→ Trianglify UI öffnen — Palette wählen, Regler schieben, Größe festlegen und als PNG, JPEG, WebP oder SVG 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.