Meshverloopgenerator

Maak een vloeiende, veelkleurige achtergrond met 4, 6 of 9 verplaatsbare punten. Kies elke kleur, sleep punten over het canvas, probeer een zorgvuldig samengestelde willekeurige paletkeuze en exporteer het resultaat als SVG of PNG. Je kunt ook een CSS-benadering met overlappende radiale verlopen kopiëren. Het project blijft tijdens het bewerken in dit browsertabblad.

Een verloop met mesheffect maken

  1. 1

    Kies het raster

    Begin met 4, 6 of 9 controlepunten. Meer punten zorgen voor meer afzonderlijke kleurgebieden.

  2. 2

    Kies de kleuren

    Gebruik de kleurkiezer van elk punt. De editor bewaart zescijferige HEX-kleuren.

  3. 3

    Verplaats de punten

    Sleep een punt, voer de horizontale en verticale positie in of gebruik de pijltoetsen.

  4. 4

    Kies het formaat

    Selecteer een liggend, breedbeeld- of vierkant formaat voor SVG en PNG.

  5. 5

    Exporteer het ontwerp

    Download PNG of SVG, of kopieer de CSS-benadering met radiale verlopen.

Hoe de drie uitvoerformaten worden gemaakt

  • PNG gebruikt dezelfde afstandsgewogen kleurmenging als het voorbeeld. Bij een andere beeldverhouding worden dezelfde relatieve punten in de nieuwe afmetingen geplaatst.
  • SVG legt radiale verlopen over elkaar op dezelfde controlepunten en blijft scherp bij vergroten.
  • CSS maakt per punt een laag met radial-gradient() boven een basiskleur, zonder afzonderlijk afbeeldingsbestand.

SVG en CSS gebruiken dezelfde projectgegevens, maar zijn lichte benaderingen van een mesh. Hun pixels zijn niet identiek aan die van de PNG.

Tips voor het kleurenpalet

  • Verwante tinten leveren meestal rustige overgangen op.
  • Contrasterende tinten maken de grenzen tussen gebieden sterker.
  • Willekeurige paletten zijn een beginpunt en garanderen geen leesbaarheid.
  • Controleer het contrast van tekst, pictogrammen en bedieningselementen op de uiteindelijke achtergrond.

Controlepunten plaatsen

Sleep een genummerd punt in het voorbeeld of geef het focus en gebruik de pijltoetsen. Houd Shift ingedrukt om vijf procentpunten per keer te bewegen. Met de horizontale en verticale velden kun je een exacte positie invoeren.

Punten mogen tot aan de rand komen. Dicht bij elkaar geplaatste punten bundelen hun kleuren; met meer afstand krijgt elke kleur meer ruimte.

Veelvoorkomende toepassingen

  • Achtergronden voor heldersecties en sectiescheidingen.
  • Kaarten voor sociale media en videominiaturen.
  • Achtergronden voor presentaties en illustraties.
  • Startschermen en decoratieve vlakken.

PNG benadert het voorbeeld het best. Gebruik SVG om scherp te schalen, of CSS voor een bewerkbare achtergrond zonder los afbeeldingsbestand.

Privacy en browseropslag

Kleuren, posities en resolutie blijven in het browsergeheugen en in sessionStorage. Ze worden niet toegevoegd aan funnel-URL’s of de server-status. De tool kan vastleggen dat er is geëxporteerd, zonder projectwaarden mee te sturen.

Het project kan maximaal zes uur uit sessionStorage worden hersteld zolang het huidige tabblad openstaat. Bij het sluiten wordt het doorgaans eerder verwijderd. Download of kopieer daarom wat je wilt behouden.

Veelgestelde vragen

Ze gebruiken verschillende rendermethoden. PNG mengt pixels naar afstand, terwijl SVG en CSS radiale verlopen stapelen. De kleuren en posities zijn gelijk, maar de afzonderlijke pixels niet.

Ja. Sleep een punt, gebruik de positievelden of geef het focus en druk op de pijltoetsen. Houd Shift ingedrukt voor grotere stappen.

De editor bewaart zescijferige HEX-kleuren. Gebruik de kleurkiezer of zet RGB of HSL eerst om naar HEX.

Nee. De gekopieerde CSS benadert het effect door standaard radiale verlopen te stapelen.

Het kan maximaal zes uur uit sessionStorage worden hersteld in het huidige tabblad. Bij het sluiten wordt het normaal eerder verwijderd. Het project gaat niet naar onze servers of funnel-URL’s.

Gerelateerde tools