Generátor CSS vzorů pozadí

Tento nástroj generuje opakující se vzory pozadí pomocí pouze CSS gradientů — žádné soubory s obrázky nejsou potřeba. Vyberte puntíky, diagonální pruhy, šachovnici nebo mřížkové linky, upravte barvy a rozestupy a zkopírujte CSS pro background-image přímo do svého stylopisu.

Co je tento nástroj?

CSS umí kreslit opakující se vzory bez jakýchkoli souborů s obrázky pomocí gradientů — radial-gradient() a linear-gradient() — jako background-image, v kombinaci s background-size, který je menší než element, takže se gradient dláždí a opakuje. Puntíky používají opakující radial-gradient, pruhy a šachovnice používají opakující nebo vrstvený linear-gradient() a mřížkové linky používají dva překrývající se linear-gradient() linky.

Tento nástroj za vás sestaví tyto deklarace gradientu. Vyberte typ vzoru, upravte barvu vzoru, barvu pozadí a rozestupy a sledujte, jak se aktualizuje živý náhled — pak zkopírujte přesné CSS pro background-image a background-size.

Zdroj: CSS Images Module Level 3, W3C — definuje repeating-linear-gradient() a repeating-radial-gradient(), funkce, ze kterých jsou tyto vzory postaveny.

Proč ho používat?

Žádné soubory s obrázky, žádné HTTP požadavky — vzor je čistě CSS a vykresluje se okamžitě v jakémkoli rozlišení, včetně retina/vysoce DPI obrazovek.
Plně upravitelná barva a rozestup bez ručního psaní syntaxe gradientu nebo počítání matematiky dláždění.
Živý náhled ukazuje přesný opakující se vzor předtím, než cokoli zkopírujete.
Škáluje čistě, protože jde o vektorovou matematiku, ne rastrový obrázek — žádné rozmazání při změně velikosti elementu.
Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává.
Zdarma, bez registrace, funguje na mobilu.

Jak se používá

Zvolte typ vzoru: puntíky, diagonální pruhy, šachovnici nebo mřížkové linky.
Vyberte barvu vzoru a barvu pozadí, která se zobrazí mezi/za tvary vzoru.
Upravte posuvník velikosti, aby byly tečky, pruhy nebo buňky mřížky větší nebo menší — to také ovlivňuje, jak hustě se vzor opakuje.
Zkopírujte vygenerované CSS a vložte ho jako background-image (a background-size/background-position tam, kde jsou zobrazeny) libovolného elementu.

Příklad

Vstup

Vzor: puntíky · Barva: modrá · Pozadí: bílá · Velikost: 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ý světlý vzor s puntíky, často používaný jako jemné pozadí sekce nebo textura karty.

Jak je postaven každý vzor

Puntíky: radial-gradient() vykreslí jeden malý vyplněný kruh, poté background-size ho zopakuje jako dlážděnou mřížku teček.
Diagonální pruhy: repeating-linear-gradient() pod úhlem 45 stupňů střídá barvu vzoru a barvu pozadí v pevném intervalu.
Šachovnice: dvě překrývající se vrstvy linear-gradient() pod 45 stupni, posunuté o polovinu dlaždice, vytvářejí střídající se světlá/tmavá pole.
Mřížkové linky: dvě tenké linear-gradient() linky — jedna vodorovná, jedna svislá — dlážděné v požadovaném rozestupu tvoří mřížku podobnou milimetrovému papíru.

Kdy použít CSS vzory místo souborů s obrázky

CSS vzor z gradientu nemá žádnou velikost souboru ani HTTP požadavek, takže se načte okamžitě a nikdy nevypadá rozmazaně na obrazovkách s vysokým DPI, na rozdíl od rastrové PNG dlaždice pozadí. Je ideální pro jemné textury za textem, dělítka sekcí, ilustrace prázdného stavu nebo záložní karty. Pro komplexní ilustrované nebo fotografické vzory je stále správnou volbou skutečný obrázek — CSS gradienty se nejlépe hodí pro jednoduché, geometrické, opakující se tvary jako tyto zde.

Kombinace s dalšími CSS efekty

Vzory dobře fungují jako pozadí za glassmorphism kartami, protože rozmazání potřebuje za sebou něco s vizuální texturou, aby bylo viditelné. Přirozeně se také kombinují se zaoblenými rohy na kontejnerovém elementu.

→ Generátor CSS Glassmorphism · Generátor border-radius

Časté dotazy

Vyžadují tyto vzory jakékoli soubory s obrázky?

Ne. Každý vzor zde je generovaný čistě pomocí CSS gradientů jako background-image — není zde žádný PNG, SVG ani jiný soubor, takže neexistuje žádný další HTTP požadavek ani riziko rozmazání na obrazovkách s vysokým rozlišením.

Můžu změnit, jak velký vzor je?

Ano — posuvník velikosti ovládá background-size, který nastavuje, jak velká je jedna opakující se dlaždice vzoru. Menší velikost umístí tečky, pruhy nebo buňky mřížky blíž k sobě; větší velikost je rozprostře.

Proč vzor šachovnice používá dva gradienty?

Jeden linear-gradient() může střídat barvy pouze v jednom směru. Vrstvení dvou gradientů pod 45 stupni, posunutých o polovinu dlaždice, je to, co vytváří střídající se světlá/tmavá pole šachovnice — je to standardní technika pro čistě CSS šachovnice.

Bude tento vzor vypadat ostře na retina/vysoce DPI obrazovkách?

Ano. Protože vzor je matematický gradient, ne bitmapový obrázek, vykreslí se v jakémkoli rozlišení, které obrazovka potřebuje, bez zvětšování nebo rozmazání — na rozdíl od malé rastrové dlaždice roztažené nebo opakované při vysoké hustotě pixelů.

Můžu tyto vzory použít jako pozadí celé stránky?

Ano — použijte vygenerovaný background-image, background-size a background-position (tam, kde jsou přítomny) na body nebo jakýkoli kontejner s plnou šířkou. Mějte na paměti kontrast: rušivý vzor s vysokým kontrastem za textem stránky může zhoršit čitelnost, takže pro velké plochy pozadí obvykle fungují lépe jemnější nastavení.