CSS Mønster-baggrundsgenerator

De fleste 'mønstergenerator'-værktøjer genbruger stille og roligt den samme repeating-linear-gradient-formel til hver mulighed og ændrer bare tallene. Det gør denne ikke: hver af de seks mønstertyper her er bygget med den specifikke CSS-teknik, der faktisk giver den pågældende form. Striber bruger en enkelt repeating-linear-gradient med to farvebånd. Prikker bruger én radial-gradient, der fliselægges udelukkende via background-size — det klassiske CSS-prikke-trick — i stedet for en repeating-radial-gradient, som ikke kan fliselægge en cirkulær prik rent på et rektangulært gitter. Skaktern bruger den ægte firekvadrant conic-gradient-formel: en konisk gradient centreret i en kvadratisk flise opdeles naturligt i fire kvadrantkvadrater ved 90-graders grænser, og ved at skifte mellem to farver på tværs af disse kvadranter fliselægges et ægte skaktern, ikke en tilnærmelse.

Gitter og diagonal krydsskravering lægger begge to repeating-linear-gradients i lag som separate background-image-poster i stedet for at simulere den anden retning med border-tricks. Gitter kombinerer en 'to right' og en 'to bottom' gentagen gradient for skarpe vandrette og lodrette linjer. Krydsskravering lægger en +45° og en -45° gentagen gradient for en kurveflet-lignende diagonal vævning — det er værd at være præcis: dette er en ærlig krydsskravering, ikke ægte sildebensgeometri, og værktøjet kalder det dét i stedet for at overdrive. Trekanter genbruger skakternets fire-kile conic-gradient-teknik, men starter gradienten roteret 45°, hvilket flytter kilegrænserne fra flisens kantmidtpunkter til dens hjørner og forvandler de samme fire kiler til fire hjørne-til-hjørne trekanter i stedet for fire kvadrantkvadrater.

Hver mønstertype viser kun de kontroller, der rent faktisk gælder for den — en vinkelskyder dukker op for striber, prikradius og afstand for prikker, linjetykkelse for gitter og krydsskravering — og den store flisevise forhåndsvisning gentegnes ved hver ændring, så du kan se flere hele gentagelser, før du beslutter dig. Skift output-tilstand til SVG, og det samme mønster vises igen som et <pattern>-element bygget af enkle rect-, circle-, path- eller polygon-primitiver, klar til at indsætte i et SVG-dokuments <defs>, med en et-kliks download af en selvstændig .svg-fil.

Alt kører lokalt i din browser: ingen billeduploads, ingen tur til serveren, ingen konto. Til ensfarvede eller gradient-baserede fyld uden gentagelse er CSS-gradient-generatoren på dette website det rette værktøj; denne her er specifikt til flisebare geometriske baggrunde bygget uden billedressourcer.