CSS háttérminta-generátor

Ez az eszköz ismétlődő háttérmintákat generál kizárólag CSS gradiensek segítségével — nincs szükség képfájlokra. Válassz pöttyöket, átlós csíkokat, sakktáblát vagy rácsvonalakat, állítsd be a színeket és a térközt, majd másold ki a background-image CSS-t egyenesen a stíluslapodba.

Mi ez az eszköz?

A CSS képfájlok nélkül is tud ismétlődő mintákat rajzolni gradiensek — radial-gradient() és linear-gradient() — használatával background-image-ként, olyan background-size-zal kombinálva, amely kisebb az elemnél, így a gradiens csempeként ismétlődik. A pöttyök egy ismétlődő radial-gradient()-et használnak, a csíkok és a sakktábla ismétlődő vagy rétegzett linear-gradient()-et, a rácsvonalak pedig két átfedő linear-gradient() vonalat.

Ez az eszköz elkészíti neked ezeket a gradiens deklarációkat. Válassz mintatípust, állítsd be a mintaszínt, a háttérszínt és a térközt, és nézd, ahogy az élő előnézet frissül — majd másold ki a pontos background-image és background-size CSS-t.

Forrás: CSS Images Module Level 3, W3C — ez definiálja a repeating-linear-gradient()-et és a repeating-radial-gradient()-et, azokat a függvényeket, amelyekből ezek a minták épülnek.

Miért érdemes használni?

Nincs képfájl, nincs HTTP-kérés — a minta tiszta CSS, és bármilyen felbontáson azonnal megjelenik, beleértve a retina/nagy DPI-jű képernyőket is.
Teljesen állítható szín és térköz, anélkül hogy kézzel kellene gradiens szintaxist írni vagy csempézési matekot számolni.
Az élő előnézet megmutatja a pontos ismétlődő mintát, mielőtt bármit is másolnál.
Tisztán skálázódik, mert vektormatematika, nem raszterkép — nincs elmosódás, amikor az elem mérete változik.
Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova.
Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

Válassz mintatípust: pöttyök, átlós csíkok, sakktábla vagy rácsvonalak.
Válaszd ki a mintaszínt és a háttérszínt, amely a mintaformák között/mögött látszik.
Állítsd a méretcsúszkát, hogy a pöttyök, csíkok vagy rácscellák nagyobbak vagy kisebbek legyenek — ez azt is szabályozza, milyen sűrűn ismétlődik a minta.
Másold ki a generált CSS-t, és illeszd be bármely elem background-image (és a megjelenő esetben background-size/background-position) tulajdonságaként.

Példa

Bemenet

Minta: pöttyök · Szín: kék · Háttér: fehér · Méret: 24px

Kimenet

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Egy klasszikus, világos pöttyös minta, amelyet gyakran használnak diszkrét szekcióháttérként vagy kártyatextúraként.

Hogyan épül fel az egyes minták

Pöttyök: egy radial-gradient() rajzol egy kicsi, kitöltött kört, majd a background-size csempézett pöttyrácsként ismételteti.
Átlós csíkok: egy 45 fokos repeating-linear-gradient() váltakozik a mintaszín és a háttérszín között fix közönként.
Sakktábla: két átfedő, 45 fokos linear-gradient() réteg, egymáshoz képest fél csempével eltolva, váltakozó világos/sötét négyzeteket ad.
Rácsvonalak: két vékony linear-gradient() vonal — egy vízszintes, egy függőleges — a kiválasztott térközzel csempézve, rácsot alkotva, hasonlóan a milliméterpapírhoz.

Mikor használj CSS mintát képfájl helyett

Egy CSS gradiensmintának nincs fájlmérete és nincs HTTP-kérése, így azonnal betölt, és sosem lesz elmosódott nagy DPI-jű képernyőkön, ellentétben egy raszter PNG háttércsempével. Ideális diszkrét textúrákhoz szöveg mögött, szekcióelválasztókhoz, üres állapot illusztrációkhoz vagy helykitöltő kártyákhoz. Bonyolult, illusztrált vagy fotós mintákhoz továbbra is egy valódi kép a megfelelő eszköz — a CSS gradiensek egyszerű, geometrikus, ismétlődő formákhoz illenek legjobban, mint amilyenek itt is vannak.

Párosítás más CSS effektekkel

A minták jól működnek háttérként üveghatású (glassmorphism) kártyák mögött, mivel az elmosódásnak látható textúrájú hátérre van szüksége ahhoz, hogy jól látszódjon. Emellett a tartalmazó elem lekerekített sarkaival is természetesen párosíthatók.

→ CSS Glassmorphism generátor · Border Radius Generátor

Gyakori kérdések

Igényelnek ezek a minták bármilyen képfájlt?

Nem. Minden itt található minta tisztán CSS gradiensekkel jön létre background-image-ként — nincs PNG, SVG vagy más fájl a képben, így nincs extra HTTP-kérés, és nincs elmosódás kockázata nagy felbontású képernyőkön sem.

Megváltoztathatom, mekkora legyen a minta?

Igen — a méretcsúszka a background-size-t szabályozza, amely megadja, mekkora egy ismétlődő csempe a mintából. A kisebb méret sűrűbben pakolja egymáshoz a pöttyöket, csíkokat vagy rácscellákat; a nagyobb méret szétteríti őket.

Miért használ a sakktábla minta két gradienst?

Egyetlen linear-gradient() csak egy irányban tud váltogatni színeket. Két, egymáshoz képest fél csempével eltolt, 45 fokos gradiens rétegezése hozza létre a sakktábla váltakozó világos/sötét négyzeteit — ez a szokásos technika a tisztán CSS-alapú sakktáblákhoz.

Éles marad ez a minta retina/nagy DPI-jű képernyőkön?

Igen. Mivel a minta matematikai gradiens, nem bitképfájl, bármilyen felbontásban megjelenik, amit a képernyő igényel, felskálázás vagy elmosódás nélkül — ellentétben egy kis raszter képcsempével, amelyet nagy pixelsűrűségnél nyújtanak vagy ismételnek.

Használhatom ezeket a mintákat teljes oldalas háttérként?

Igen — alkalmazd a generált background-image, background-size és (ahol jelen van) background-position tulajdonságokat a body-ra vagy bármely teljes szélességű konténer elemre. Figyelj a kontrasztra: egy zsúfolt, nagy kontrasztú minta a törzsszöveg mögött ronthatja az olvashatóságot, ezért nagy háttérterületekhez általában a világosabb, visszafogottabb beállítások működnek jobban.