About ShapeKiln
The questions people ask about this site, answered plainly.
What is ShapeKiln?
ShapeKiln is a set of free in-browser generators for visual assets: Open Graph images, mesh gradients, noise textures, SVG waves, and SVG blobs. Every generator renders its output with JavaScript in your own browser tab.
Is ShapeKiln free?
Yes. Every tool is free with no signup, no watermark, and no generation limits. The site is supported by ads.
Does ShapeKiln upload my text, colors, or images?
No. Headlines, palettes, and any logo you add are processed entirely in your browser — previews are drawn on a local canvas or SVG, and downloads are assembled on your machine. Nothing is transmitted, and the pages work offline once loaded.
Can I use what I generate commercially?
Yes. Everything you generate with ShapeKiln is yours to use anywhere, including client and commercial work, with no attribution required.
Is ShapeKiln affiliated with FileKiln and GradeKiln?
Yes — ShapeKiln is the third of the Kiln utilities, alongside FileKiln (in-browser file converters) and GradeKiln (in-browser GPA calculators). All three run on the same local-only principle.
How do I contact ShapeKiln?
Email hello@shapekiln.com. Bug reports, feature requests, and questions all land in the same inbox and get read.
From the workbench
The problems that bring people here, answered the way we'd answer them over your shoulder.
Why is my Open Graph image not showing when I share a link?
Usually one of three things: the og:image URL is relative instead of absolute, the image is the wrong size (aim for 1200×630), or the platform cached your page before the image existed. Fix the tag, then run the page through the platform's sharing debugger to refresh the cache. If the problem is that you don't have an image at all, the OG Image Generator makes a correct-size card in about a minute.
How do I make a grainy gradient background?
Layer fine noise over a soft gradient. Make the gradient first — the Mesh Gradient Generator has a grain slider that bakes the texture straight into the PNG — or keep it in CSS by stacking a one-line noise overlay from the Noise Texture Generator on top of any gradient you already have.
What's the difference between a mesh gradient and a linear gradient?
A linear gradient blends colors along one straight line. A mesh gradient spreads several color fields across the surface from different points, so the result reads as soft depth instead of a stripe. That's why hero sections and wallpapers lean on mesh — you can build one from your own palette with the Mesh Gradient Generator.
How do I stop a CSS gradient from banding?
Banding is 8-bit color running out of steps across a long, soft transition. The fix is dithering: lay a fine, low-opacity grain over the gradient so the eye can't find the edges between steps. The Noise Texture Generator's grain-overlay mode copies out as a single line of CSS you can stack on any background.
How do I add a section divider to my site without an image file?
Use an inline SVG wave. It's a few hundred bytes, scales to any width, and if you set its fill to currentColor it follows your theme automatically. The SVG Wave Generator builds layered dividers you can copy as markup and paste straight into your HTML.
Can I make an abstract wallpaper without design software?
Yes — a wallpaper is just a big gradient with taste. Pick four or five colors in the Mesh Gradient Generator, reshuffle until the composition lands, add grain, and export at 1920×1080 or the phone preset. No account, no software, and the PNG renders at full resolution regardless of your screen.
What sizes do social preview and banner images use?
The card most platforms render is 1200×630 (Open Graph). X profile headers are 1500×500 and LinkedIn banners are 1584×396. All three are presets in the OG Image Generator, and the headline re-fits itself when you switch.
How do I put a blob shape behind a product photo?
Two clean ways: drop the blob SVG behind the image as a positioned background element, or use the blob's path in an SVG clipPath to mask the photo itself. The SVG Blob Generator gives you the single-path SVG either approach needs — complexity and randomness sliders, then copy.
Do these generators work offline?
Yes. Each tool is plain JavaScript running in your tab, so once a page has loaded it keeps working without a connection — previews, shuffles, and downloads included. Nothing you make is transmitted anywhere either way.