Generate seamless tiling patterns (stripes, dots, chevrons, geometric) as PNG or SVG.
This tool builds a repeating pattern from a small set of controls - pattern type, color pair or palette, element size, spacing, and rotation - then renders one tile that repeats edge to edge with no visible seam. You export the result as a flat PNG at a chosen pixel size or as an SVG built around a repeatable tile unit. What trips people up: the export is only as seamless as the tile you configured. Rotating a stripe or chevron pattern without letting the tool recompute the tile dimensions can leave a visible seam where tiles meet, especially along the rotated axis.
The pattern is drawn inside one repeatable tile rather than across an open canvas. Any shape that would cross the tile boundary is split and continued on the opposite edge, so the left edge of the tile always matches what would be the right edge of the next copy, and likewise top to bottom. This is what makes background-repeat or a tiled fill look continuous instead of showing a seam.
PNG export rasterizes the tile at a fixed pixel size decided at generation time - stretching it later blurs or pixelates edges. SVG export keeps the pattern as vector paths inside a tile definition, so it stays sharp at any size and can still be edited (colors, stroke widths, node positions) afterward in a vector editor or text editor.
Yes. SVG output is stored as vector paths and shape elements, so you can open it in a vector editor or text editor afterward and adjust colors, stroke widths, or positions. A PNG export, by contrast, is a flattened raster image and cannot be edited the same way - only the original tool settings can regenerate it.
It will, as long as you use the exported tile's exact pixel dimensions as the background-size (or leave it at native size). If the image gets resized by the browser or the CSS container before it repeats, seams can appear even though the underlying tile itself was seamless.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.