Mesh-gradiëntgenerator

Maak mesh-gradiënten met versleepbare kleurpunten

Mesh-gradiënten laten veel kleuren in zachte, organische overgangen over een oppervlak in elkaar overlopen. Ze zijn een vast onderdeel geworden van heroachtergronden, splashscreens van apps en albumhoezen, omdat ze rijker aanvoelen dan een eenvoudig lineair verloop met twee kleuren. Met deze mesh-gradiëntgenerator plaats je drie tot zes gekleurde punten direct op het canvas, sleep je ze op hun plek en zie je de overgang meteen veranderen.

Hoe het werkt in pure CSS

Browsers ondersteunen geen echte mesh-gradiënten, maar je kunt ze benaderen door meerdere radial-gradient()-achtergronden te stapelen. Elke laag is gecentreerd op een van je punten en vervaagt van de kleur van dat punt naar een volledig transparante versie van dezelfde kleur, en alle lagen liggen boven op een basis-background-color. De overlappende overgangen mengen de kleuren vloeiend, wat de mesh-look oplevert. De gegenereerde CSS is één declaratie zonder afbeeldingen, dus hij laadt direct en schaalt naar elk elementformaat.

Vervagen naar rgba() met alfa nul, in plaats van naar het sleutelwoord transparent, voorkomt de grijze randen die in sommige renderers kunnen verschijnen, en zorgt er bovendien voor dat hetzelfde verloop exact kan worden nagebootst op een HTML-canvas voor de PNG-export.

Vervaging, ruis en paletten

De vervagingsschuifregelaar voegt een CSS-filter: blur() toe voor een nog zachtere look, en de ruisschuifregelaar legt er een SVG-textuur van fractale ruis overheen die subtiele korrel toevoegt en kleurbanding op grote oppervlakken vermindert. De knop Random palette kiest een harmonieuze set tinten met evenwichtige verzadiging en helderheid, en Random layout herschikt daarnaast de punten. Ben je tevreden, kopieer dan de CSS naar je stylesheet of download een PNG van 1600 bij 900 pixels. Alles wordt lokaal in je browser gegenereerd en er wordt niets geüpload.