Mesh-gradientgenerator

Skapa mesh-gradienter med dragbara färgpunkter

Mesh-gradienter blandar många färger över en yta i mjuka, organiska övergångar. De har blivit en självklarhet för hero-bakgrunder, startskärmar i appar och skivomslag eftersom de känns rikare än en enkel linjär gradient i två färger. Med den här mesh-gradientgeneratorn kan du placera mellan tre och sex färgade punkter direkt på arbetsytan, dra dem på plats och se blandningen uppdateras direkt.

Så fungerar det i ren CSS

Webbläsare stöder inte äkta mesh-gradienter, men du kan efterlikna dem genom att lägga flera radial-gradient()-bakgrunder i lager. Varje lager är centrerat på en av dina punkter och tonar från punktens färg till en helt genomskinlig version av samma färg, och alla lager ligger ovanpå en grundläggande background-color. De överlappande övertoningarna blandar färgerna mjukt, vilket ger mesh-utseendet. Den genererade CSS:en är en enda deklaration utan bilder, så den laddas direkt och skalas till alla elementstorlekar.

Att tona till rgba() med alfa noll, i stället för nyckelordet transparent, undviker de grå kanter som kan uppstå i vissa renderingsmotorer, och det gör det också möjligt att återskapa exakt samma gradient på en HTML-canvas för PNG-exporten.

Oskärpa, brus och paletter

Oskärpereglaget lägger till ett CSS-filter: blur() för ett ännu mjukare utseende, och brusreglaget lägger på en SVG-textur med fraktalt brus som ger subtilt korn och minskar färgbandning på stora ytor. Knappen Slumpmässig palett väljer en harmonisk uppsättning nyanser med balanserad mättnad och ljushet, och Slumpmässig layout flyttar dessutom om punkterna. När du är nöjd kopierar du CSS:en till din stilmall eller laddar ned en PNG på 1600 gånger 900 pixlar. Allt genereras lokalt i din webbläsare och ingenting laddas upp.