CSS-mönsterbakgrundsgenerator

De flesta ”mönstergeneratorer” återanvänder i smyg samma repeating-linear-gradient-formel för varje alternativ och ändrar bara siffrorna. Den här gör inte det: var och en av de sex mönstertyperna här är byggd med den specifika CSS-teknik som faktiskt skapar den formen. Räder använder en enda repeating-linear-gradient med två färgband. Prickar använder en radial-gradient som kaklas enbart via background-size – det klassiska CSS-pricktricket – snarare än en repeating-radial-gradient, som inte kan kakla en cirkulär prick rent på ett rektangulärt rutnät. Schackrutigt använder den äkta 4-kvadrants conic-gradient-formeln: en konisk gradient centrerad i en kvadratisk kakelplatta delas naturligt i fyra kvadrantrutor vid 90-gradersgränser, och genom att växla två färger över dessa kvadranter kaklas ett äkta schackrutigt mönster, inte en approximation.

Rutnät och diagonalt korsmönster skiktar båda två repeating-linear-gradienter som separata background-image-poster snarare än att fejka den andra riktningen med kanttrick. Rutnät kombinerar en ”to right” och en ”to bottom” upprepad gradient för skarpa horisontella och vertikala linjer. Korsmönster skiktar en +45° och en -45° upprepad gradient för en korgvävsliknande diagonal fläta – värt att vara noggrann med: detta är ett ärligt korsmönster, inte äkta fiskbensgeometri, och verktyget etiketterar det så istället för att överdriva. Trianglar återanvänder schackrutornas 4-kvadrants conic-gradient-teknik men startar gradienten roterad 45 grader, vilket flyttar kvadrantgränserna från kakelplattans kantmittpunkter till dess hörn och förvandlar samma fyra kilar till fyra hörn-till-hörn-trianglar istället för fyra kvadrantrutor.

Varje mönstertyp exponerar bara de reglage som faktiskt gäller för den – en vinkelreglage visas för ränder, prickradie och -avstånd visas för prickar, linjetjocklek visas för rutnät och korsmönster – och den stora kaklade förhandsvisningsrutan uppdateras vid varje ändring, så att du kan se flera hela upprepningar innan du bestämmer ett värde. Växla utdataläget till SVG så visas samma mönster igen som ett <pattern>-element byggt av enkla rect-, circle-, path- eller polygon-primitiver, redo att klistras in i vilket SVG-dokuments <defs> som helst, med nedladdning av en fristående .svg-fil med ett klick.

Allt körs lokalt i din webbläsare: inga bilduppladdningar, ingen serverkommunikation, inget konto. För solida eller gradientfyllningar utan upprepning är CSS-gradientgeneratorn på den här webbplatsen rätt verktyg istället; det här är specifikt för kaklingsbara geometriska bakgrunder byggda från noll bildtillgångar.