# 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.

Source: https://www.jpkc.com/db/en/tools/trianglify/

## Low-poly backgrounds in seconds

[Trianglify UI](https://www.jpkc.com/tools/trianglify/) 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](https://www.jpkc.com/db/en/tools/trianglify/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](https://www.jpkc.com/tools/trianglify/)** — pick a palette, move the sliders, click *Generate Pattern*, and download as SVG or PNG. No account, free, right in the browser.

## Related JPKCom tools

For other backgrounds and matching colors:

- **[GeoPattern](https://www.jpkc.com/db/en/tools/geopattern/)** — geometric SVG background patterns from a text seed, a different pattern language than triangles.
- **[Colors](https://www.jpkc.com/db/en/tools/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](https://www.jpkc.com/db/en/tools/trianglify/manual/)** with every option and value range, hands-on **[examples](https://www.jpkc.com/db/en/tools/trianglify/examples/)**, and a collection of **[tips & tricks](https://www.jpkc.com/db/en/tools/trianglify/tips/)**.