JPKCom DB

Trianglify UI

Generate algorithmic low-poly triangle backgrounds as SVG or PNG — with color palettes, a seed, and export. Your starting point for the manual, examples, and tips.

Low-poly backgrounds in seconds

Trianglify UI generates algorithmically created low-poly triangle backgrounds — those geometric fields of gradient-shaded triangles you know from hero sections, login screens, and app backdrops. You set a few sliders, click Generate Pattern, and immediately get a finished pattern you can download as SVG or PNG, or copy straight away as a data URL.

The problem it solves: building backgrounds like this by hand in a graphics program is tedious and hard to reproduce. Trianglify UI takes that off your plate — same seed, same pattern, reproducible at any time. And instead of shipping an image file around, you can embed the result as a compact SVG right in your CSS.

It's built for everyone who needs a good-looking background fast: developers who want a hero or card background straight as a CSS background; designers trying out variants for a moodboard; and anyone exporting a wallpaper, a presentation backdrop, or a social graphic at high resolution. No account, no installation, free.

What you can adjust

The controls sit in a Settings card on the left, with the preview filling the rest:

  • Seed — an optional starting value for the random generator. The same seed plus the same settings produce exactly the same pattern — the basis for reproducible results. A click on the shuffle icon creates a random 8-character seed.
  • Color Palette — one of 27 named ColorBrewer palettes (18 sequential such as Blues, Greens, YlOrRd, plus 9 diverging such as Spectral, RdYlBu) or the Random mode.
  • Use custom color gradient — alternatively, your own gradient from a start and end color chosen via a color picker (Coloris). This is how you build patterns in your brand colors.
  • Cell Size — the cell size from 20 to 200 px: small values give many fine triangles, large values a few big ones.
  • Variance — the variance from 0 to 1.5: at 0 a regular grid, the higher the value the more irregular and jagged the pattern.

Every change re-renders the preview instantly. Which values produce which effect is covered in the manual.

Export and embedding

Every pattern gives you three outputs:

  • Download PNG and Download SVG at a selectable export resolution — from HD through Full HD (default) and QHD up to 4K, or a custom size up to 8192 px.
  • Base64 data URLs for PNG and SVG to copy — ideal for embedding the pattern directly as a CSS background-image without a separate image file.

SVG is usually the better choice for web backgrounds: vector-based, scalable, and for these patterns often smaller than a PNG. Use PNG when you need a classic bitmap — for a wallpaper or a presentation, say.

All in the browser — nothing leaves your device

Trianglify UI is purely client-side: there's no server roundtrip, no API, and no upload. The pattern is generated entirely in your browser via the open-source Trianglify.js library (by Quinn Rohlf, GPL-3.0). What you create stays on your device until you download or copy it yourself.

Try it now

→ Open Trianglify UI — pick a palette, move the sliders, click Generate Pattern, and download as SVG or PNG. No account, free, right in the browser.

For other backgrounds and matching colors:

  • GeoPattern — geometric SVG background patterns from a text seed, a different pattern language than triangles.
  • Colors — color picker, gradient generator, and palette extractor for finding the start and end colors of your custom gradient.

There's more on the subpages: the manual with every option and value range, hands-on examples, and a collection of tips & tricks.