Background creator – Mesh gradient creator

Sometimes you want a background with a color or grayscale gradient. Of course you can search for an existing image. That has some disadvantages: (1) You have to be able to find the image. (2) It is usually not very original. (3) It makes the page in question very slow. ‘Mesh gradient creator’ creates a background; random or you enter the colors yourself. The result is a CSS code that you can use in your builder / Gutenberg block. The image of this post has the following colors as CSS: radial-gradient(at 21% 47%, hsla(302,97%,66%,1) 0px, transparent 50%), radial-gradient(at 92% 0%, hsla(289,61%,75%,1) 0px, transparent 50%), radial-gradient(at 95% 10%, hsla(261,91%,78%,1) 0px, transparent 50%), radial-gradient(at 52% 90%, hsla(17,92%,67%,1) 0px, transparent 50%), radial-gradient(at 60% 42%, hsla(148,98%,65%,1) 0px, transparent 50%), radial-gradient(at 12% 14%, hsla(205,77%,64%,1) 0px, transparent 50%), radial-gradient(at 6% 69%, hsla(91,64%,63%,1) 0px, transparent 50%); You process this as a complete CSS code as follows: .mesherhero { background: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%), radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%), radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%), radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%); }