CSS Gradient Generator
Mesh and linear gradients, copy-paste ready.
Controls
CSS
background-color: #3b0610;
background-image:
radial-gradient(circle at 15% 10%, #6b0f1a 0%, transparent 65%),
radial-gradient(circle at 85% 25%, #b8890f 0%, transparent 55%),
radial-gradient(circle at 60% 90%, #3b0610 0%, transparent 70%);React / Tailwind
<div
className="min-h-screen"
style={{
backgroundColor: "#3b0610",
backgroundImage: [
"radial-gradient(circle at 15% 10%, #6b0f1a 0%, transparent 65%)",
"radial-gradient(circle at 85% 25%, #b8890f 0%, transparent 55%)",
"radial-gradient(circle at 60% 90%, #3b0610 0%, transparent 70%)",
].join(", "),
}}
/>Build the gradient visually and copy the CSS. Mesh mode layers soft radial colour points over a base — the technique behind most of the ambient backgrounds you see on product sites. Linear mode is the classic two-or-more stop gradient with full control over angle and positions.
Does CSS have real mesh gradients?
Not as a primitive. What everyone calls a mesh gradient on the web is several radial-gradients layered over a solid base colour, each fading to transparent. That is exactly what this tool emits, which is why the output is plain CSS with no library behind it.
Will these gradients hurt performance?
CSS gradients are painted by the compositor and cost far less than a background image — no extra request, no bytes, and they stay sharp at any size. Animating them is the expensive part; a static gradient is effectively free.
How many colour points should I use?
Three or four usually reads best. Beyond that the colours start muddying each other where they overlap, and the composition loses the sense of depth that made the technique appealing. Widely spaced points with generous spread produce the softest result.
Can I use this as a full-page background?
Yes — apply it to a container with a minimum height of 100vh. If the gradient needs to stay put while content scrolls over it, add a fixed position layer behind your content rather than using background-attachment, which behaves inconsistently on mobile.
How do I check text is readable on it?
Sample the lightest and darkest points of the gradient and test your text colour against both in our contrast checker. Gradients fail accessibility in exactly one predictable way: text that passes over one end and fails over the other.
We build the kind of software this tool is a small piece of — web platforms, mobile apps and design systems, end to end.