Help

Mesh gradient generator voor CSS en SVG

Kies 2 tot 8 kleuren en deze mesh gradient generator mengt ze tot een zachte, vloeiende achtergrond die je vormgeeft door de kleurpunten te slepen. Met CSS kopiëren krijg je CSS die in elke moderne browser werkt, met SVG downloaden een bestand van 1600 × 1200 dat naar elk formaat schaalt. Alles draait in je browser, zonder WebGL, upload of account.

Zo werkt de mesh gradient, stap voor stap

Kijk naar het voorbeeld. De kleine ronde stippen erop zijn de kleurpunten, één voor elke kleurvlek in de mesh.
Druk op Willekeurig voor een nieuw willekeurig palet met nieuwe opstelling, zo vaak als je wilt, tot iets in de buurt komt van wat je zoekt.
Open de rij Kleuren en klik op een kleurstaal om je eigen kleur te kiezen. Met Kleur toevoegen komen er kleuren bij (tot 8) en met de kleine x op een staal haal je er een weg (tot je er 2 over hebt).
Beweeg de schuifregelaar Complexiteit, van 2 tot 6, om het aantal kleurpunten van de mesh te veranderen.
Sleep een stip om hem te verplaatsen, met de muis of met je vinger. Met het toetsenbord selecteer je een stip en druk je op de pijltjestoetsen; houd Shift ingedrukt voor grotere stappen.
Druk op CSS kopiëren of SVG downloaden als het voorbeeld goed zit. Een korte melding, Gekopieerd of Opgeslagen, bevestigt het.

Het voorbeeld wordt bijgewerkt bij elke wijziging, en het vak CSS-code toont altijd de CSS van precies wat je ziet. Als je de complexiteit verandert of op "Willekeurig" drukt, worden de punten opnieuw neergezet, dus punten die je had versleept krijgen een nieuwe plek.

Wat de complexiteit doet

De complexiteit maakt een raster van complexiteit × complexiteit kleurpunten, en elk punt krijgt één kleur uit je palet. Meer punten geven een gevarieerdere mesh met kleinere vlekken, minder punten geven brede, eenvoudige vlakken.

Complexiteit 2: 4 kleurpunten, elke vlek beslaat 65% van het canvas
Complexiteit 3: 9 punten, 43%
Complexiteit 4: 16 punten, 33%
Complexiteit 5: 25 punten, 26%
Complexiteit 6: 36 punten, 22%

Eén ding om op te letten: de kleuren worden over de punten verdeeld, dus een palet kan meer kleuren hebben dan de mesh punten heeft. Bij complexiteit 2 zijn er maar 4 punten, dus een palet van 6 kleuren toont er hooguit 4 tegelijk. Verhoog de complexiteit om de rest te laten verschijnen.

Mesh gradient CSS om te plakken

Het vak CSS-code bevat twee declaraties: een background-color (het gemiddelde van je palet, zodat geen enkele hoek leeg blijft) en een background-image die per kleurpunt één radial-gradient() opstapelt. Het is gewone CSS, zonder afbeeldingsbestand of script.

Elke laag loopt van een volle kleur in het midden naar volledig transparant aan de rand, en de lagen overlappen elkaar, waardoor de kleuren in elkaar overvloeien. Grootte en positie staan in procenten, dus het kleurverloop rekt mee met het element waarop je het toepast. Zoek je een gradient generator CSS die direct bruikbare code geeft, dan is dit er een.

Mesh gradient SVG downloaden

SVG downloaden slaat mesh-kleurverloop.svg op. Het bestand heeft een viewBox van 1600 × 1200, een basisrechthoek in dezelfde gemiddelde kleur en per kleurpunt één radialGradient. Omdat het vector is, blijft het scherp als telefoonachtergrond, dia-achtergrond of afbeelding voor een social post. In een kader dat niet 4:3 is, vult de afbeelding het kader en worden de randen afgesneden in plaats van uitgerekt.

Heb je een PNG nodig, open dan de SVG in een browser of editor die SVG leest en exporteer hem in het formaat dat je wilt.

Mesh gradient online als achtergrond gebruiken

Website of hero-sectie: plak de CSS in de regel voor dat element. Tekst op een drukke kleurenmix kan slecht leesbaar zijn, test het dus met de Kleurcontrast Controleur.
Dia's, achtergronden en social posts: download de SVG en plaats of exporteer hem vanuit je ontwerpapp.
Passend bij een merk: klik op een staal en kies je eigen kleur. De Kleurkiezer uit Afbeelding kan eerst een kleur uit een foto of logo halen.

Beide uitvoeren zijn een momentopname van het huidige voorbeeld. Als je opnieuw willekeurig mengt, kopieer of download dan opnieuw om de nieuwe versie te krijgen.

Veelgestelde vragen

Is er een mesh gradient css generator die CSS geeft?

Ja, deze. Het vak "CSS-code" toont een background-color plus een background-image van opgestapelde radial-gradient()-lagen, één per kleurpunt. Het is standaard CSS zonder JavaScript of afbeeldingsbestand en werkt in elke moderne browser. Druk op "CSS kopiëren" en plak het in een stylesheet of een style-attribuut.

Kan ik een mesh gradient als SVG downloaden?

Ja. "SVG downloaden" slaat een bestand op met een viewBox van 1600 × 1200. Het is opgebouwd uit radialGradient-lagen en blijft dus op elk formaat scherp. In een kader dat niet 4:3 is, vult de afbeelding het kader en worden de randen afgesneden in plaats van uitgerekt.

Hoe gebruik ik een mesh gradient als website-achtergrond?

Kopieer de CSS en plak de twee declaraties in de regel van het element dat je wilt inkleuren, zoals een hero-sectie of de body. De vlekken staan in procenten, dus ze rekken mee met het element. Controleer of je tekst leesbaar blijft op de gekozen kleuren.

Kan ik de mesh gradient als PNG krijgen?

Niet rechtstreeks: deze tool exporteert CSS en SVG, geen PNG. Open de gedownloade SVG in een browser of editor die SVG leest en exporteer hem of maak een schermafbeelding in het formaat in pixels dat je nodig hebt.

Kan ik de mesh gradient animeren?

Nee. De tool maakt één stilstaand kleurverloop: je kunt de punten slepen en de kleuren veranderen, maar de CSS en SVG die hij exporteert bewegen niet.

Is dit hetzelfde als het gradiëntnet in Illustrator?

Nee. Het gradiëntnet van Illustrator is een raster van bewerkbare vectorvlakken. Deze generator mengt overlappende zachte radiale verlopen, één per kleurpunt. Dat geeft een vergelijkbare vloeiende, veelkleurige look, maar wordt geëxporteerd als gewone CSS of SVG.

Waar vind ik een gradient generator css online?

Deze tool is er een voor mesh-verlopen: je kiest 2 tot 8 kleuren en krijgt de CSS voor een zachte achtergrond. Voor een eenvoudig verloop tussen twee kleuren bestaan andere tools, hier gaat het om een mesh zonder afbeeldingen om te hosten.

Aanbevolen

Govee Smart Light Bars
Laat dezelfde zachte kleurgloed op de muur achter je monitor schijnen.
Fujifilm Instax Mini Link 3 Smartphone Printer
Print je favoriete mesh als kaartje of wallpaper-aandenken voor in je zak.
Calibrite Display 123 colorimeter
Zorg dat je kleurverloop op elk scherm er hetzelfde uitziet.

Help de tools gratis te houden. ✨

Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.