Question 1

What is a "mesh gradient" — how is it different from a normal radial gradient?

Accepted Answer

A normal radial gradient has one center and a list of color stops
that fade outward in a single circle. A mesh gradient is a 2D grid
of control points, each with its own color, and the pixels in
between are filled by interpolating across all four neighbors at
once (bilinear in the simplest case, bicubic in tools like Adobe
Illustrator's mesh tool). The visual difference is huge — a single
radial fades from one color to another along a circle, a mesh
blends six or eight colors into smooth biomorphic shapes that look
like spilled paint or aurora. Mesh gradients are why Stripe, Linear,
Vercel, and every 2024-era landing page hero looks the way it does.

Question 2

SVG mode vs Canvas mode — when do I pick which?

Accepted Answer

Pick SVG when you want the export to stay editable in Figma /
Illustrator (each blob is a separate radial gradient you can move
independently), when you need a tiny payload (~15 KB), and when
you'll render at multiple sizes (SVG scales infinitely). Pick
Canvas when you want a true bilinear mesh — every pixel is a
weighted average of the four nearest control points, which catches
subtle color shifts SVG can't reproduce — and when your delivery
is a flat PNG anyway (hero image, social card, OG image). Canvas
mode is ~50 ms slower per redraw on a 1920×1080 frame but the
result is sharper and closer to what Photoshop's mesh tool gives.

Question 3

Why OKLCH for the Randomize button instead of HSL or RGB?

Accepted Answer

HSL and RGB are not perceptually uniform — sampling colors evenly
in either gives you piles of unusable neon green and very few
tasteful deep teals or muted pinks. OKLCH (designed by Björn
Ottosson, supported in CSS Color Level 4) is roughly perceptually
uniform — equal numeric steps in lightness or chroma look like
equal perceived steps to the eye. We sample six points in a
narrow lightness band (0.6-0.85) and a moderate chroma band
(0.10-0.18), then jitter the hue around two anchor hues so the
palette stays harmonious. Net effect: every "randomize" roll
gives you a brand-safe set, not "let's try again 20 times".

Question 4

Can I drag the control points or is it preset-only?

Accepted Answer

Drag-only is the whole point. Click and drag any of the 4-12
control points to reposition it on the canvas. Click "+" to add a
new point (up to 12), the trash icon next to a point to remove
it (minimum 4). Each point has its own color picker — change it
and the mesh recomputes in the next animation frame. Mobile
PointerEvent is wired up so the same drag works on touch screens.
The preset list seeds positions and colors for you; from there
you're free to fine-tune.

Question 5

What CSS fallback does the "CSS multi-radial-gradient" export produce, and when do I need it?

Accepted Answer

Real mesh gradients aren't a CSS primitive — they live in SVG. For
environments where SVG-as-background is awkward (old email clients,
some CMS HTML editors, sites locked to IE-era CSS subsets) we emit
a `background-image: radial-gradient(...), radial-gradient(...), ...`
stack — one radial per control point, each soft-edged so they
blend visually like a mesh. The fidelity is lower than the true
SVG / Canvas mesh (no bilinear interpolation, just additive blob
stacking) but it gives you a single CSS declaration that works in
every browser back to IE 11. Use this when SVG isn't an option or
when your design system wants the gradient inline in stylesheets.

Question 6

Does the share link include all my control points and colors?

Accepted Answer

Yes. Position + color of every control point, the active preset,
the canvas ratio, the render mode (SVG / Canvas), and the blur
radius all serialize into the URL via the shared useUrlState hook.
Share the link in Slack or a PR review and the recipient lands on
the identical mesh you designed. The URL caps at ~1.8 KB for 12
points, well under the 2 KB safety limit history.replaceState
accepts on every browser.

Question 7

Are the colors safe for accessible body text on top of the mesh?

Accepted Answer

Not automatically — a mesh gradient is busy by definition, and
WCAG contrast is measured per-pixel against the foreground text.
Three practical fixes: (1) crank the blur slider to 60-90 — the
stronger the blur, the closer the underlying color is to one
averaged dominant color where contrast becomes predictable; (2)
layer a semi-transparent dark or light panel behind the text and
measure contrast against that panel, not the raw mesh; (3) ship
the mesh as a decorative element (hero, divider, card backdrop)
and put body copy on a solid-color sibling block. Mesh gradients
are for atmosphere, not text legibility.

Gradient Mesh Generator — Drag 4-12 Control Points, Export SVG / PNG / CSS

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Gradient Mesh Generator fits into your work

Generation jobs

Generation checks

Good next steps

Real-world use cases

Build a SaaS landing-page hero in two minutes flat

Generate 20 unique OG / Twitter card backgrounds in one sitting

Hand a brand-aligned mesh to a junior designer to iterate on

Replace a stock photo on an internal dashboard

Test a mesh against text legibility before committing

Produce a vertical 9:16 mesh for a TikTok / Reels backdrop

Common pitfalls

Privacy

FAQ

Tool combos

Gradient Mesh Generator — Drag 4-12 Control Points, Export SVG / PNG / CSS

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Gradient Mesh Generator fits into your work

Generation jobs

Generation checks

Good next steps

Real-world use cases

Build a SaaS landing-page hero in two minutes flat

Generate 20 unique OG / Twitter card backgrounds in one sitting

Hand a brand-aligned mesh to a junior designer to iterate on

Replace a stock photo on an internal dashboard

Test a mesh against text legibility before committing

Produce a vertical 9:16 mesh for a TikTok / Reels backdrop

Common pitfalls

Privacy

FAQ

SVG Wave Generator

CSS Gradient Generator

Glassmorphism Generator

Neumorphism Generator

24-Point Solver & Game

Chinese Acupoint Locator

API Key Generator

Arabic 500 Essential Words

ASCII Art Generator

Avatar Generator

Backup Codes Generator

Barcode Generator