Trianglify UI — Examples

Back to the overview: Trianglify UI · Open the tool live: www.jpkc.com/tools/trianglify/

The manual explains every setting and value range in detail. This page adds concrete workflows — typical tasks played through step by step. Control and button names appear exactly as in the tool's interface.

Example 1: A background in your brand colors

You need a hero background that matches your corporate design — not just some random colorful palette.

1. Open Trianglify UI and turn on the Own two-colour gradient switch. This disables the Colour palette and Vertical gradient dropdowns.
2. Click the Start colour field and enter your first brand color as a hex value (e.g. a dark brand blue, #264653; three-digit short forms work too, with each digit doubled — so #246 stands for #224466). Repeat for End colour with a second, harmonizing color. If you mistype, the field turns red and the preview stays at the last valid state.
3. Set Cell size to a mid value (say 75) and Variance to taste — lower for a calm pattern, higher for a lively one.
4. Optional: under Style, Shadows with an Effect strength around 0.3 adds a bit of depth to the gradient. The triangles get randomly a little darker than your brand colors in the process — for exact shades, stay with Smooth gradient.
5. The preview updates instantly. Happy with it? You now have a background in exactly your colors.

Tip: if you don't have your brand's exact hex values handy, find them with the Colors tool (color picker and palette extractor).

Example 2: Reproducing a pattern by seed

You found a pattern in the preview that you want to keep, restore exactly later, or send to a colleague.

1. Click the shuffle icon (New random seed) next to the seed field. The tool sets a random 8-character seed and renders a new pattern. Reroll until you like the result.
2. In the Size & export card, click Copy link. The copied URL contains the seed, palette, style, every slider, and the size, e.g. https://www.jpkc.com/tools/trianglify/#seed=k7m2xq9p&palette=Blues.
3. Open that link — on another machine or weeks later — and the tool restores every value: you get exactly the same pattern back.

Without the link, the seed alone does the job as long as you note the other settings: the same seed plus the same values (size included) give you the same pattern. The only thing the link leaves out is the double-pixel-density option — tick it again at export time if you need it.

Example 3: Embedding it as a CSS background

You want to use the pattern directly in your stylesheet, without a separate image file.

1. Create the pattern you want in the preview and pick a Size whose aspect ratio fits your area (Full HD or X header for a wide hero, say). For a web background, a fairly large Cell size makes sense — it keeps the string short.
2. Click Copy CSS. Your clipboard now holds two ready-made lines: background-image with the pattern as a URL-encoded SVG data URI, and background-size: cover.
3. Drop them into your selector and add a position if needed:

.hero {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1080' …");
	background-size: cover;
	background-position: center;
}

Because the SVG sits inline in the CSS, this saves an extra HTTP request. How long the string is, you can see in the collapsible Data URIs card next to the SVG title — you can also copy the data URI on its own there. Thanks to the viewBox, the SVG scales losslessly to any width with background-size: cover.

Example 4: Exporting a 4K PNG hero image

For a presentation backdrop or a wallpaper, you need a high-resolution bitmap.

1. In the Size & export card, first pick 4K (3840 × 2160) under Size — or Custom… and enter your own size (up to 8192 px per side).
2. Then dial in the pattern. Since the tool computes directly at 4K, the preview already shows the final image; Cell size is measured in 4K pixels. For a look about as coarse as at Full HD, roughly double it (150 instead of 75).
3. Click PNG. The tool downloads exactly the pattern from the preview as trianglify-<seed>-3840x2160.png.

The order matters: if you only change the size at the end, the tool computes a new pattern, because the triangle geometry depends on width and height. For a Retina wallpaper, also tick Raster images at 2× pixel density — Full HD then becomes a 3840 × 2160 px PNG with the unchanged pattern, its file name ending in @2x.

Example 5: Using a specific ColorBrewer palette

You don't need a custom brand scheme but a proven, balanced color scheme.

1. Leave Own two-colour gradient off and open the Colour palette dropdown.
2. From the Sequential group pick a single-hue progression (e.g. Blues or Greens) for a calm, professional look — or from Diverging a high-contrast palette (e.g. Spectral or Red-Yellow-Blue) for a livelier pattern. The swatch strip below the dropdown shows the palette's colors.
3. For a two-dimensional gradient, choose a second palette under Vertical gradient — Blues horizontally and Oranges vertically, for instance.
4. Play with Cell size and Variance until the balance is right, then export as in Example 3 (CSS) or 4 (PNG).

The 27 palettes come from ColorBrewer and are designed for good distinguishability — a quick shortcut to a coherent result without mixing colors yourself.

Example 6: A wireframe as a transparent overlay

You want the triangle structure as a subtle line layer on top of a solid color or a photo.

1. Turn on Wireframe (outlines only, transparent). The fill disappears, and the preview shows just the outlines over a checkerboard that indicates transparency.
2. Set the stroke with Line width — at 0, the tool draws 1 px automatically. The lines carry the palette's gradient colors; for a more uniform look, pick a single-hue palette like Greys or your own gradient with two similar colors.
3. Download the result as PNG or WebP — both keep the transparent background. JPEG, on the other hand, puts the lines on white. SVG and Copy CSS don't work here either: in wireframe mode the triangles in the SVG have no fill attribute and are filled black, so the overlay would cover the area underneath completely.

In CSS, you then simply layer the wireframe over a background color:

.section {
	background-color: #1d3557;
	background-image: url("trianglify-k7m2xq9p-1920x1080.webp");
	background-size: cover;
}

Example 7: An Open Graph image and a social media header

You need a preview image for shared links and a matching profile banner in the same look.

1. Under Size, pick Open Graph (1200 × 630), set up a palette or your own gradient, and download the image as PNG or JPEG.
2. Use Copy link to save the settings so you can find the look again later.
3. Switch the size to X header (1500 × 500) and download again. Because the geometry changes with the size, you get a new pattern — but the colors, style, and density stay the same, and that's what counts for a consistent presence.

For a phone background there's Phone wallpaper (1080 × 1920), and for square posts Square (1080 × 1080).

---

There's more depth: the overview for the big picture, the manual for every option, and the tips & tricks for tricks and pitfalls. You can try everything right in the tool.