Crystal Gradient Generator

A crystal gradient is a 2D pattern made of irregular polygonal cells, where each cell is filled with a colour sampled from a palette. The cells share edges with their neighbours, tile the plane completely without overlapping, and have shapes determined by mathematics rather than by an artists hand. The visual result reads as crystalline (think the inside of a geode, or shattered ice), as cellular (cell biology, foam), or as stained-glass (cathedral windows) depending on edge sharpness and palette choices.

The underlying technique is the Voronoi diagram, a mathematical structure invented in the 19th century to study spatial partitioning. The diagram places points (seeds) randomly in the plane and assigns every other point in the plane to the cell of its nearest seed. The result: irregular polygonal regions whose boundaries are perpendicular bisectors of neighbouring seeds.

What makes this useful for design is that the technique is procedural. Change the seed positions and you get a new pattern with the same overall feel. Change the seed count and you go from sparse dramatic facets to dense frosted-glass texture. The Gradients.design crystal generator wraps the math in a slider-based editor so you can dial in the look without thinking about computational geometry.

A Voronoi diagram answers the question: given a set of points scattered in the plane, which region of space is closer to each point than to any other? The answer divides the plane into cells, one per point, each bounded by perpendicular bisectors of neighbouring seeds.

The structure shows up surprisingly often in nature. Cracks in dried mud form Voronoi patterns. Soap bubble foams. Giraffe spots. The cells of a beehive (regularised into hexagons). Cell tissue in microscope images. The pattern is so common because it represents an efficient way to partition a 2D surface given a set of distributed points: minimum total boundary length for a given seed distribution.

For design, this matters because Voronoi patterns look organic without looking random. The cells are irregular but follow consistent rules, so the eye reads them as "naturally varied" rather than as chaos. This is why crystal gradients work well as backgrounds: they have visual interest without distracting the viewer.

The studios renderer computes the diagram on the GPU in real time. Reseeding (regenerating the seed positions) takes about 50 milliseconds, so you can flip through compositions as fast as you can click. Export resolution is unlimited because the cell boundaries are computed at render time rather than stored as pixels.

1. Open the crystal editor. Visit the free crystal gradient generator. The canvas opens with a default cell layout at medium density.
2. Set cell density. Pick 10 to 500 cells. Fewer means bigger, more dramatic facets; more means finer, frosted-glass texture. Around 50 to 100 cells works for most uses.
3. Pick a palette. Add 2 to 8 colours. Each cell picks from the palette, with neighbouring cells getting visually similar colours so the composition reads as cohesive rather than random.
4. Reseed and export. Press reseed to regenerate the cell layout. Export PNG up to 8K, or SVG on paid plans for vector-perfect output that scales infinitely.

One of the strengths of Voronoi geometry is that it serialises cleanly to SVG path data. The studios SVG export produces a single SVG file where each cell is a polygon element with its own fill colour. The output is editable in any vector tool.

A simplified example of what the SVG output looks like:

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <polygon points="120,80 200,40 240,120 180,180 100,160" fill="#a8d5e0" />
  <polygon points="240,120 320,80 380,160 320,220 280,180" fill="#7fb8c8" />
  <polygon points="100,160 180,180 220,260 140,300 60,260" fill="#5d9aaf" />
  <!-- ...more polygons... -->
</svg>

For fabric, wallpaper, and print design where the artwork needs to scale to billboards or wrap around 3D products, SVG is the right format. The studios SVG output is hand-optimised for file size: cells share vertices where possible, and floating-point coordinates are rounded to two decimal places, so a typical 100-cell SVG lands at 20 to 50 KB rather than 200 plus KB.

For web use where SVG offers no real advantage over PNG (the visual is decorative, not interactive), prefer PNG. SVG is most useful when you need to edit individual cells later or when print resolution matters more than file size.

One of the most-requested crystal-gradient looks is the stained-glass effect: high contrast between cells, saturated palette, dark borders between cells that read as lead came (the metal strips that hold real stained glass together). The studio includes a stained-glass preset that hits this look in one click.

If you build from scratch, the recipe is:

1. Cell density: 30 to 60 cells. Larger cells make the stained-glass feel more apparent.
2. Edge sharpness: maximum. Soft edges read as frosted glass, not stained.
3. Palette: 4 to 6 saturated colours, with at least one warm and one cool. Real stained glass uses bold contrasting tones.
4. Optional: enable cell borders. The studios stained-glass mode adds dark borders between cells, simulating the lead came in real stained glass.

For print posters at A2 or larger, export PNG at 8K. The stained-glass aesthetic holds up at print sizes because the cell geometry stays sharp. For SVG export, the cell borders are real polygon strokes that can be edited per-cell in your vector tool.

Three gradient modes in the studio produce cellular or tiled patterns, but they use different geometry and read differently.

Pick crystal when you want irregularity that still feels designed. Pick geometric when you want angular structure (conference key art, low-poly aesthetics). Pick metaball when you want soft fluid forms with no hard boundaries.

• Mobile lock-screen wallpapers. The procedural variation means every user can have a unique wallpaper from the same template.
• Abstract poster art. A3 and A2 prints, brand identity wall art, gallery exhibition pieces.
• Stained-glass effects. Decorative web elements, event invites, religious or cultural design.
• Game environment backplates. Especially for puzzle games, casual games, and any game with a low-poly or crystalline aesthetic.
• Album cover designs. Indie, electronic, and experimental music covers lean on crystalline visuals.
• Brand pattern systems. Premium consumer brands use crystal patterns on packaging, gift cards, and social media kits.
• Editorial layouts. Magazine spreads about science, nature, or technology pair well with crystal-pattern backgrounds.
• Wedding stationery. Modern minimalist weddings have adopted crystal patterns as an alternative to traditional florals.

1. Too many cells. 500 cells turns the pattern into visual noise. Stay under 200 for compositions where cell shape should matter.
2. Too few cells. Under 15 cells reads as random shapes, not as a pattern. Aim for 30 minimum for a coherent crystalline feel.
3. No colour neighbourhood logic. If neighbouring cells get random colours from the palette, the result reads as confetti. The studio defaults to colour neighbourhood smoothing; leave this on unless you specifically want a chaotic look.
4. Mixing warm and cool colours randomly. Pick one temperature direction (all warm or all cool) plus one or two accent colours. Random temperature mixing across cells fights itself.
5. Pure white or pure black cells. Real crystals have subtle tints. Use near-white and near-black with slight palette-matched undertones.
6. Edge sharpness mismatched to use. Soft edges for backgrounds. Hard edges for accent graphics. Mismatch makes the gradient feel off.