JPKCom DB

Trianglify UI

Low-poly triangle backgrounds in the browser: palettes or your own gradient, styles, wireframe, PNG/JPEG/WebP/SVG, CSS and a shareable link. Start here.

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 move a few sliders, the preview follows live, and you download the finished pattern as PNG, JPEG, WebP, or SVG, copy it as a line of CSS, or share it as a link.

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 — every pattern has a seed, and the same seed plus the same settings always gives you the same pattern back. The download is exactly the image from the preview, just at full size. And instead of shipping an image file around, you can embed the result as 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 (on a phone, the preview comes first):

  • Seed — the starting value for the random generator. The same seed plus the same settings produce exactly the same pattern. Leave the field empty and the tool fills in a seed itself; the shuffle icon rolls a new 8-character one.
  • Colour palette — one of 27 ColorBrewer palettes (18 sequential such as Blues or Greens, 9 diverging such as Spectral or Red-Yellow-Blue) or Random (from the seed). With Vertical gradient you can add a second palette for the vertical axis.
  • Own two-colour gradient — alternatively, your own gradient from a start and end color, picked with a color picker (Coloris) or typed as a hex value. This is how you build patterns in your brand colors.
  • Style — a plain gradient (Smooth gradient), random color jitter (Sparkle), or random darkening (Shadows), the two effects with adjustable strength.
  • Cell size — from 10 to 400 px, measured at the export size: small values give many fine triangles, large values a few big ones.
  • Variance — from 0 to 1.5: at 0 a regular grid, and the higher the value, the more irregular and jagged the pattern.
  • Line width and Wireframe — trace the triangle edges, or output only the outlines on a transparent background.

Every change re-renders the preview immediately, sliders even while you drag them. Which values produce which effect is covered in the manual.

Export and embedding

You pick the size up front — the pattern is computed at that size, and the preview just shows it scaled down. From there you get:

  • PNG, JPEG, WebP, and SVG downloads in one of the presets — HD, Full HD (default), QHD, 4K, Open Graph (1200 × 630), X header (1500 × 500), Square, and Phone wallpaper (1080 × 1920) — or at a custom size from 16 to 8192 px. Raster images optionally at 2× pixel density for Retina displays.
  • Copy CSS — a ready-made background-image line with the pattern as an SVG data URI.
  • Copy link — a URL that carries every setting; whoever opens it sees the same pattern.
  • Data URIs for SVG and PNG to copy, with their size shown.

SVG is usually the better choice for web backgrounds: vector-based, scalable, and compact for coarser patterns. Reach for PNG, JPEG, or WebP when you need a classic bitmap — a wallpaper, a presentation, or a social media preview image.

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). Your settings live only in the page URL; nothing is stored. What you create stays on your device until you download it, copy it, or share the link yourself.

Try it now

→ Open Trianglify UI — pick a palette, move the sliders, set the size, and download as PNG, JPEG, WebP, or SVG. 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 own gradient.

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