Achtergrond creator – Mesh gradient creator
Omschrijving
Soms wil je een achtergrond met een kleur of grijstoon verloop. Natuurlijk kun je zoeken naar een bestaande afbeelding. Dat heeft enkele nadelen: (1) Je moet de afbeelding kunnen vinden. (2) Het is meestal niet erg origineel. (3) het maakt de betreffende pagina heel traag. ‘Mesh gradient creator’ creëert een achtergrond; random of je geeft zelf de kleuren in. Het resultaat is een CSS code die je kunt gebruiken in je builder / Gutenberg blok. De afbeelding van deze post heeft de volgende kleuren als 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%);
Dit verwerk je als een complete CSS-code als volgt:
.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%);
}
Voordelen pro versie
Het is geen pro versie, maar de functionaliteit maakt wel deel uit van CSS Hero – https://csshero.org/.
Let op; er zijn meer CSS gradiënt generatoren, zoals: https://gradients.app/en/newmesh
Conclusie
Ik ben niet heel enthousiast over CSS Hero in het algemeen (heb het een keer aangeschaft, binnen de bedenktermijn geld teruggevraagd en nooit gekregen) maar deze functie is echt handig.
