CSS-mønsterbakgrunnsgenerator

De fleste "mønstergenerator"-verktøyene gjenbruker stille den samme repeterende lineære gradientformelen for hvert alternativ og bare endre tallene. Denne gjør det ikke: hver av de seks mønstertypene her er bygget fra den spesifikke CSS-teknikken som faktisk produserer den formen. Striper bruker en enkelt repeterende-lineær-gradient med to fargebånd. Prikker bruker én radiell gradient som er flislagt rent gjennom bakgrunnsstørrelsen – det klassiske CSS-prikkertrikset – i stedet for en repeterende radialgradient, som ikke kan flislegge en sirkulær prikk rent på et rektangulært rutenett. Checkerboard bruker den ekte fire-kvadrant-konisk-gradient-formelen: en konisk gradient sentrert i en firkantet flis deles naturlig opp i fire kvadrant-firkanter ved 90-graders grenser, og veksler to farger på tvers av disse kvadrant-brikkene til et ekte sjakkbrett, ikke en tilnærming.

Rutenett og diagonal skravering begge lag to repeterende-lineære-gradienter som separate bakgrunnsbildeoppføringer i stedet for å forfalske den andre retningen med kanttriks. Rutenett kombinerer en "til høyre" og en "til bunn" repeterende gradient for skarpe horisontale og vertikale regellinjer. Crosshatch legger en repeterende gradient på +45 grader og en -45 grader for en diagonalvev i kurvvev-stil – verdt å være presis om: dette er en ærlig kryssskravering, ikke ekte fiskebeinsgeometri, og verktøyet merker det på den måten i stedet for å overheve. Trekanter gjenbruker sjakkbrettets fire-kile kjeglegradientteknikk, men starter gradienten rotert 45 grader, som forskyver kilegrensene fra flisens kantmidtpunkter til hjørnene og gjør de samme fire kilene til fire hjørne-til-hjørne-trekanter i stedet for fire kvadrantfirkanter.

Hver mønstertype viser bare kontrollene som faktisk gjelder for den - en vinkelglidebryter vises for striper, prikkeradius og mellomrom vises for prikker, linjetykkelse vises for rutenett og krysser - og den store forhåndsvisningsboksen med fliser males på nytt ved hver endring, slik at du kan se flere fullstendige gjentakelser før du forplikter deg til en verdi. Vend utdatamodusen til SVG og det samme mønsteret dukker opp igjen som et <pattern>-element bygget av vanlige rect-, sirkel-, bane- eller polygonprimitiver, klare til å lime inn i ethvert SVG-dokuments <defs>, med en ett-klikks nedlasting for en frittstående .svg-fil.

Alt kjører lokalt i nettleseren din: ingen bildeopplastinger, ingen server rundtur, ingen konto. For solid- eller gradientfyll uten repetisjon, er CSS-gradientgeneratoren på denne siden det riktige verktøyet i stedet; denne er spesielt for flisbare geometriske bakgrunner bygget fra null bildeelementer.