Generátor CSS vzorov pozadia

Tento nástroj generuje opakujúce sa vzory pozadia použitím len CSS gradientov — bez potreby obrázkových súborov. Vyberte bodkovaný vzor, diagonálne pruhy, šachovnicu alebo mriežkové čiary, upravte farby a rozostupy a skopírujte CSS pre background-image priamo do svojho štýlopisu.

Čo je tento nástroj?

CSS dokáže kresliť opakujúce sa vzory bez akýchkoľvek obrázkových súborov použitím gradientov — radial-gradient() a linear-gradient() — ako background-image, v kombinácii s background-size menším než prvok, takže sa gradient dláždi a opakuje. Bodkovaný vzor používa opakujúci sa radial-gradient, pruhy a šachovnice používajú opakujúci sa alebo vrstvený linear-gradient() a mriežkové čiary používajú dve prekrývajúce sa čiary linear-gradient().

Tento nástroj za vás vytvára tieto deklarácie gradientov. Vyberte typ vzoru, upravte farbu vzoru, farbu pozadia a rozostupy a sledujte, ako sa aktualizuje živý náhľad — potom skopírujte presný CSS kód pre background-image a background-size.

Zdroj: CSS Images Module Level 3, W3C — definuje repeating-linear-gradient() a repeating-radial-gradient(), funkcie, z ktorých sú tieto vzory postavené.

Prečo ho používať?

Žiadne obrázkové súbory, žiadne HTTP požiadavky — vzor je čisté CSS a vykresľuje sa okamžite pri akomkoľvek rozlíšení, vrátane retina/vysoko-DPI obrazoviek.
Plne nastaviteľná farba a rozostup bez ručného písania syntaxe gradientu alebo počítania matematiky dláždenia.
Živý náhľad zobrazuje presný opakujúci sa vzor ešte predtým, ako čokoľvek skopírujete.
Škáluje čisto, keďže ide o vektorovú matematiku, nie rastrový obrázok — bez rozmazania pri zmene veľkosti prvku.
Beží úplne vo vašom prehliadači — nič, čo nakonfigurujete, sa nikam nenahráva.
Zadarmo, bez registrácie, funguje na mobile.

Ako sa používa

Vyberte typ vzoru: bodkovaný vzor, diagonálne pruhy, šachovnicu alebo mriežkové čiary.
Vyberte farbu vzoru a farbu pozadia, ktorá sa zobrazuje medzi/za tvarmi vzoru.
Upravte posuvník veľkosti, aby ste zväčšili alebo zmenšili bodky, pruhy alebo bunky mriežky — toto tiež ovláda, ako husto sa vzor opakuje.
Skopírujte vygenerovaný CSS a vložte ho ako background-image (a background-size/background-position tam, kde je zobrazené) ľubovoľného prvku.

Príklad

Vstup

Vzor: bodkovaný · Farba: modrá · Pozadie: biele · Veľkosť: 24px

Výstup

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

Klasický svetlý bodkovaný vzor často používaný ako jemné pozadie sekcie alebo textúra karty.

Ako je vytvorený každý vzor

Bodkovaný vzor: radial-gradient() nakreslí jeden malý vyplnený kruh, potom background-size ho zopakuje ako dlaždicovú mriežku bodiek.
Diagonálne pruhy: repeating-linear-gradient() pod uhlom 45 stupňov striedavo prepína medzi farbou vzoru a farbou pozadia v pevnom intervale.
Šachovnica: dve prekrývajúce sa vrstvy linear-gradient() pod 45 stupňami, posunuté voči sebe o polovicu dlaždice, vytvárajú striedavé svetlé/tmavé štvorce.
Mriežkové čiary: dve tenké čiary linear-gradient() — jedna vodorovná, jedna zvislá — dláždené pri zvolenom rozostupe tvoria mriežku podobnú milimetrovému papieru.

Kedy použiť CSS vzory namiesto obrázkových súborov

Vzor z CSS gradientu nemá veľkosť súboru ani HTTP požiadavku, takže sa načíta okamžite a nikdy nevyzerá rozmazane na obrazovkách s vysokým DPI, na rozdiel od rastrovej dlaždice pozadia PNG. Je ideálny na jemné textúry za textom, rozdeľovače sekcií, ilustrácie prázdneho stavu alebo náhradné karty. Pri zložitých ilustrovaných alebo fotografických vzoroch je stále vhodnejší skutočný obrázok — CSS gradienty sa najlepšie hodia na jednoduché, geometrické, opakujúce sa tvary, ako sú tie tu.

Kombinácia s ďalšími CSS efektmi

Vzory dobre fungujú ako podklad za kartami s glassmorphism efektom, keďže rozmazanie potrebuje za sebou niečo s vizuálnou textúrou, aby bolo viditeľné. Prirodzene sa tiež kombinujú so zaoblenými rohmi kontajnerového prvku.

→ Generátor CSS glassmorphism efektu · Generátor border-radius

Časté otázky

Vyžadujú si tieto vzory nejaké obrázkové súbory?

Nie. Každý vzor je tu generovaný výlučne CSS gradientmi ako background-image — nejde o žiadny súbor PNG, SVG ani iný, takže neexistuje žiadna extra HTTP požiadavka ani riziko rozmazania na obrazovkách s vysokým rozlíšením.

Môžem zmeniť, aký veľký je vzor?

Áno — posuvník veľkosti ovláda background-size, ktorý určuje, aká veľká je jedna opakujúca sa dlaždica vzoru. Menšia veľkosť zoskupí bodky, pruhy alebo bunky mriežky bližšie k sebe; väčšia veľkosť ich roztiahne.

Prečo vzor šachovnice používa dva gradienty?

Jeden linear-gradient() dokáže striedať farby len v jednom smere. Vrstvenie dvoch gradientov pod 45 stupňami, posunutých voči sebe o polovicu dlaždice, je to, čo vytvára striedavé svetlé/tmavé štvorce šachovnice — toto je štandardná technika pre šachovnice len z CSS.

Bude tento vzor vyzerať ostro na retina/vysoko-DPI obrazovkách?

Áno. Keďže vzor je matematický gradient, nie bitmapový obrázok, vykresľuje sa v akomkoľvek rozlíšení, ktoré obrazovka potrebuje, bez zväčšovania alebo rozmazávania — na rozdiel od malej rastrovej dlaždice obrázka natiahnutej alebo opakovanej pri vysokej hustote pixelov.

Môžem tieto vzory použiť ako pozadie celej stránky?

Áno — aplikujte vygenerovaný background-image, background-size a background-position (tam, kde sú prítomné) na telo dokumentu alebo ľubovoľný kontajner na celú šírku. Majte na pamäti kontrast: rušivý, vysoko kontrastný vzor za textom tela môže poškodiť čitateľnosť, takže pre veľké plochy pozadia zvyčajne fungujú lepšie jemnejšie nastavenia.