Dizajn / CSS

Generator CSS šablona (prugice, tačkice, mreža, šahovnica)

Napravite ponavljajuće pozadinske šare samo pomoću CSS gradijenata: prugice, dijagonalne prugice, linije mreže, tufne, šahovnicu i cik-cak šaru, uz sopstvene dve boje, veličinu i širinu linija, pa kopirajte CSS.

Generator CSS šablona (prugice, tačkice, mreža, šahovnica): Svaka šara sastoji se od jednog ili dva CSS gradijenta koji se ponavljaju u izabranoj veličini: repeating-linear-gradient za prugice, dva ukrštena linear-gradient gradijenta za mrežu, radial-gradient za tačkice i repeating-conic-gradient za šahovnicu. Nema datoteke slike, pa šara ostaje oštra pri svakom uvećanju i ne zahteva preuzimanje podataka. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Generator CSS šaraLokalna obrada

U potpunosti radi u vašem pregledaču

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Svaka šara se crta samo pomoću CSS gradijenata, pa nema slike za preuzimanje, ostaje oštra pri svakom uvećanju, a boje mogu da se promene u stilovima. Šare iza teksta neka budu suptilne: nizak kontrast između dve boje olakšava čitanje teksta.

Kako se crta šahovska tabla

repeating-conic-gradient(#000 0 25%, transparent 0 50%) boji prvu i treću četvrtinu kruga oko centra svake pločice, čime dobija dva dijagonalna kvadrata po pločici; background-size postavlja veličinu pločice na dvostruku veličinu kvadrata.

Kombinovanje šara

Pozadinske slike se slažu: navedite gradijent iz CSS generatora gradijenata posle šare, razdvojene zarezom, pa će šara biti iznad gradijenta.

Kako se koristi

  1. Izaberite šaru.
  2. Odaberite dve boje, veličinu ponavljanja i širinu linije ili veličinu tačkice.
  3. Kopirajte CSS.

Privatnost i ograničenja

Sve se izvršava u vašem pregledaču.

Srodne alatke

CSS gradijentSVG talasGlassmorphism

Često postavljana pitanja

Da li šare rade u svakom pregledaču?

Da: svaki aktuelni pregledač podržava ove gradijente, uključujući konusni gradijent koji se koristi za šahovnicu.

Kako da postavim šaru iza teksta?

Izaberite dve slične boje kako bi šara ostala nenametljiva, a tekst zadržao dovoljan kontrast.

Mogu li da promenim ugao prugica?

Da: izmenite ugao u funkciji repeating-linear-gradient u kopiranom CSS-u, na primer 60deg umesto 45deg.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban