Create Beautiful Meshed Gradient Backgrounds with Mesher

I don’t recall exactly how I stumbled upon this tool (probably a Reddit post which I can no longer find). This is Mesher by CSS Hero. In order to showcase this neat thing, I am going to create an element below that uses the background that I generated.

Look how awesome this background is!

How does it work? Well, I thought it was mostly magic at first but after closer examination it appears to be strategically overlapped radial gradients. First, a base/fallback color is set. Then, on comma-separated lines, several radial gradients are made at points using a percentage-based x-y-coordinate, then the hsla() color is defined, the 0px tells it to start 0px from the center. Lastly, the transparency is defined. Then repeat that several times with different colors at different positions like below:

.mesher {
    background-color: #ff99bb;
    background-image:
        radial-gradient(at 83% 5%, hsla(132, 97%, 70%, 1) 0px, transparent 50%),
        radial-gradient(at 9% 5%, hsla(261, 88%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 95% 91%, hsla(9, 61%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 82% 32%, hsla(8, 65%, 78%, 1) 0px, transparent 50%),
        radial-gradient(at 42% 16%, hsla(169, 84%, 61%, 1) 0px, transparent 50%),
        radial-gradient(at 73% 37%, hsla(249, 95%, 79%, 1) 0px, transparent 50%),
        radial-gradient(at 37% 59%, hsla(186, 62%, 75%, 1) 0px, transparent 50%);
}

Mesher is really cool though be cause it allows you to slide the colors around in realtime, edit the colors, reposition them in your palette, or just randomize the whole thing. When you’re happy with the result, you can “export” to get your CSS code.

Timothy's Dev Stuff

Create Beautiful Meshed Gradient Backgrounds with Mesher