Sleep kleurpunten over een canvas om een zachte mesh gradient te bouwen, kopieer dan pure CSS van gestapelde radiale gradiënten of download een PNG. Gratis, in uw browser.
Mesh gradient generator
Een mesh gradient laat meerdere kleurpunten over een vlak in elkaar overlopen in plaats van langs één lijn. Op het web kunt u dat nabootsen met gewone CSS door per punt één radial-gradient over een basiskleur te stapelen. Sleep de punten hieronder, stel elke kleur en het bereik in, en kopieer dan de CSS of sla een PNG op.
Welke gradiënttool bij de klus past
U wilt
Gebruik
Resultaat
Een stilstaande, zachte vlekkenachtergrond zonder script
Deze mesh generator
CSS of PNG
Een langzaam bewegende achtergrond
Shader gradient generator
WebGL-component
Een rechte, radiale of conische overgang met twee tot vijf stops
CSS gradient generator
Eén gradiëntregel
Elk punt hier wordt een eigen radiale gradiënt, geschilderd boven op een basiskleur. Omdat het resultaat gewone CSS is, kost het geen download, heeft uw site er geen JavaScript voor nodig, en schaalt het naar elk formaat zonder wazig te worden.
Kies een preset of houd de standaard, en sleep dan een genummerde handgreep op het canvas om die kleur te verplaatsen.
Toetsenbordgebruikers kunnen een handgreep focussen en die met de pijltjestoetsen verschuiven, of exacte X- en Y-waarden typen in de puntenlijst.
Wijzig de kleur en het bereik van een punt. Het bereik is waar de kleur volledig transparant wordt, gemeten als deel van de afstand van het punt tot de verste hoek van het vlak.
Voeg tot acht punten toe of verwijder overbodige, en kopieer dan de CSS of download het canvas als PNG op het formaat dat u kiest.
Drie tot vijf punten zien er meestal rijker uit dan acht. Meer lagen maken het midden vooral modderig.
Kies een basiskleur dicht bij het lichtste punt voor een pastellook, of heel donker voor een gloeiende nachtstijl.
Zet koptekst boven het rustigste deel, en controleer het contrast op de lichtste en donkerste plekken die de tekst bedekt.
De PNG is handig voor e-mail en afbeeldingen voor sociale media, waar een CSS-achtergrond niet met het ontwerp meegaat.
Veelgestelde vragen
Is dit een echte mesh gradient?
Ontwerpprogramma's zoals vectoreditors bouwen echte meshes uit een raster van vlakjes. CSS heeft geen mesh-functie, dus deze tool stapelt radiale gradiënten, wat hetzelfde zachte, veelkleurige gevoel geeft voor achtergronden en hero-secties.
Waarin verschilt dit van de shader gradient generator?
De shadertool tekent een geanimeerde gradiënt met WebGL en exporteert een component dat een script uitvoert. Deze maakt een stilstaand beeld met alleen CSS, dus het verschijnt direct, kan worden afgedrukt en werkt waar scripts geblokkeerd zijn.
Waarom vervaagt elke kleur naar een transparante versie van zichzelf?
Vervagen naar het sleutelwoord transparent kan de rand in sommige interpolatiemodi grijzig kleuren. Door elke laag te laten eindigen op dezelfde rood-, groen- en blauwwaarden met alpha nul blijft de rand schoon.
Kan ik de CSS in Tailwind gebruiken?
Ja. Zet de declaraties in een class in uw stylesheet, of plak de waarde van background-image in een arbitrary property zoals [background-image:...] als u het liever inline houdt.
Komt de PNG precies overeen met de CSS?
Bijna. De download wordt op een canvas getekend met dezelfde punten, kleuren en hetzelfde bereik, maar browsers kunnen canvasgradiënten iets anders afvlakken dan CSS-gradiënten.
Hoe gestapelde radiale gradiënten een mesh vormen
background-image accepteert een door komma's gescheiden lijst, en de eerst genoemde laag wordt bovenop geschilderd. Elke laag hier is een cirkel rond één punt, vol in het midden en transparant bij het bereik, zodat naburige kleuren overlappen en mengen.
Er is geen grootte-sleutelwoord opgegeven, dus elke cirkel gebruikt de standaardgrootte farthest-corner, en de stoppercentages schalen mee met het vlak. Een punt dicht bij het midden verspreidt zich daardoor minder dan een punt in een hoek met hetzelfde bereik, en een brede banner maakt elke cirkel groter, dus bekijk de preview in de beeldverhouding die u echt gebruikt.
Zo ziet het er goed uit
Kies kleuren die dicht bij elkaar op de kleurencirkel liggen voor een rustig resultaat, en voeg één contrasterend punt toe voor energie. Trek punten deels buiten de rand om te suggereren dat de kleur buiten het kader doorloopt.
Ziet u zichtbare banding in grote donkere gradiënten, voeg dan een lichte ruistextuur als extra laag toe, of maak de basis iets lichter.
De CSS achter een mesh
Dit is de preset Haven, met de hand uitgeschreven. Wijzig een waarde en het resultaat werkt bij in het frame.
Vier punten op een lichte basis
Elke radial-gradient is één kleurpunt. Lagen die eerst staan, liggen boven de lagen erna.
Wat elke instelling regelt
Instellingen en de CSS die ze opleveren
Instelling
CSS-onderdeel
Effect
Positie van het punt
circle at X% Y%
Waar de kleur het sterkst is
Kleur van het punt
eerste kleurstop
De tint die op die plek wordt geschilderd
Bereik
tweede stop, bijv. 55%
Deel van de afstand tot de verste hoek waar de kleur volledig transparant is
Basiskleur
Wat zichtbaar is waar geen punt komt
Volgorde van punten
volgorde van de lagen
Eerdere punten bedekken latere waar ze overlappen
Haven
Abrikoos
Nachtdienst
Weide
Mesh gradient-editor
Sleep genummerde kleurpunten op het canvas, stel elke kleur en het bereik in, en kopieer dan de CSS of download een PNG. Presets: Haven, Abrikoos, Nachtdienst, Weide.
Presets
Punt {n} op {x}% {y}%. Gebruik de pijltjestoetsen om te verplaatsen.