CSS-mönsterbakgrundsgenerator

De flesta "mönstergenerator"-verktyg återanvänder tyst samma repeterande linjär-gradientformel för varje alternativ och ändrar bara siffrorna. Den här gör det inte: var och en av de sex mönstertyperna här är byggd från den specifika CSS-teknik som faktiskt producerar den formen. Ränder använder en enda repeterande-linjär-gradient med två färgband. Prickar använder en radiell gradient som är sida vid enbart genom bakgrundsstorlek - det klassiska CSS-prick-tricket - snarare än en repeterande-radial-gradient, som inte kan lägga till en cirkulär prick rent på ett rektangulärt rutnät. Checkerboard använder den riktiga formeln för konisk gradient med fyra kvadranter: en konisk gradient centrerad i en fyrkantig bricka delas naturligt i fyra kvadrantrutor vid 90-gradersgränser, och växlar två färger över dessa kvadranter till en äkta schackbräde, inte en approximation.

Rutnät och diagonal krysshacka båda lager två repeterande linjära gradienter som separata bakgrundsbildposter snarare än att fejka den andra riktningen med gränstrick. Rutnät kombinerar en "till höger" och en "till botten" upprepande gradient för skarpa horisontella och vertikala regellinjer. Crosshatch lager en +45 grader och en -45 graders repeterande gradient för en korgväv-stil diagonalväv - värt att vara exakt om: det här är en ärlig crosshatch, inte sann fiskbensgeometri, och verktyget märker det så istället för att överkrava. Trianglar återanvänder schackbrädets fyrkiliga koniska gradientteknik men startar gradienten roterad 45 grader, vilket flyttar kilgränserna från brickans 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 kontroller som faktiskt gäller för den - en vinkelreglage visas för ränder, punktradie och mellanrum visas för punkter, linjetjocklek visas för rutnät och kryss - och den stora sida vid sida förhandsgranskningsrutan målas om vid varje förändring så att du kan se flera hela upprepningar innan du bestämmer dig för ett värde. Vänd utdataläget till SVG och samma mönster dyker upp igen som ett <pattern>-element byggt av vanliga rect-, cirkel-, bana- eller polygonprimitiver, redo att klistra in i alla SVG-dokuments <defs>, med en nedladdning med ett klick för en fristående .svg-fil.

Allt körs lokalt i din webbläsare: inga bilduppladdningar, ingen server tur och retur, inget konto. För solida eller gradientfyllningar utan upprepning är CSS-gradientgeneratorn på den här webbplatsen det rätta verktyget istället; den här är speciellt för beläggningsbara geometriska bakgrunder byggda från noll bildtillgångar.