Generator CSS pozadinskih uzoraka

Ovaj alat generira ponavljajuće pozadinske uzorke koristeći isključivo CSS gradijente — nisu potrebne slikovne datoteke. Odaberite točkice, dijagonalne pruge, šahovnicu ili mrežne linije, prilagodite boje i razmak, te kopirajte background-image CSS izravno u svoj stylesheet.

Što je ovaj alat?

CSS može crtati ponavljajuće uzorke bez ijedne slikovne datoteke koristeći gradijente — radial-gradient() i linear-gradient() — kao background-image, u kombinaciji s background-size manjim od elementa tako da se gradijent poploča i ponavlja. Točkice koriste ponavljajući radial-gradient, pruge i šahovnica koriste ponavljajući ili slojeviti linear-gradient(), a mrežne linije koriste dvije preklopljene linear-gradient() linije.

Ovaj alat gradi te deklaracije gradijenta umjesto vas. Odaberite tip uzorka, prilagodite boju uzorka, pozadinsku boju i razmak, te pratite kako se prikaz uživo ažurira — zatim kopirajte točan background-image i background-size CSS.

Izvor: CSS Images Module Level 3, W3C — definira repeating-linear-gradient() i repeating-radial-gradient(), funkcije od kojih su ovi uzorci izgrađeni.

Zašto ga koristiti?

Bez slikovnih datoteka, bez HTTP zahtjeva — uzorak je čisti CSS i prikazuje se trenutno na bilo kojoj rezoluciji, uključujući retina/high-DPI zaslone.
Potpuno prilagodljiva boja i razmak bez ručnog pisanja sintakse gradijenta ili računanja matematike poplačivanja.
Prikaz uživo pokazuje točan ponavljajući uzorak prije nego bilo što kopirate.
Skalira se čisto jer je riječ o vektorskoj matematici, ne rasterskoj slici — bez zamućenja pri promjeni veličine elementa.
Izvodi se u potpunosti u vašem pregledniku — ništa što konfigurirate ne šalje se nikamo.
Besplatno, bez prijave, radi na mobitelu.

Kako ga koristiti

Odaberite tip uzorka: točkice, dijagonalne pruge, šahovnica ili mrežne linije.
Odaberite boju uzorka i pozadinsku boju koja se prikazuje između/iza oblika uzorka.
Prilagodite klizač veličine kako biste točkice, pruge ili ćelije mreže učinili većima ili manjima — ovo također kontrolira gustoću ponavljanja uzorka.
Kopirajte generirani CSS i zalijepite ga kao background-image (i background-size/background-position gdje je prikazano) bilo kojeg elementa.

Primjer

Ulaz

Uzorak: točkice · Boja: plava · Pozadina: bijela · Veličina: 24px

Izlaz

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

Klasičan svijetli uzorak točkica koji se često koristi kao suptilna pozadina sekcije ili tekstura kartice.

Kako je izgrađen svaki uzorak

Točkice: radial-gradient() crta jedan mali ispunjeni krug, a zatim background-size čini da se ponavlja kao poplačena mreža točkica.
Dijagonalne pruge: repeating-linear-gradient() pod kutom od 45 stupnjeva izmjenjuje boju uzorka i pozadinsku boju u fiksnom razmaku.
Šahovnica: dva preklopljena sloja linear-gradient() od 45 stupnjeva, pomaknuta jedan od drugog za pola pločice, proizvode izmjenične svijetle/tamne kvadrate.
Mrežne linije: dvije tanke linear-gradient() linije — jedna vodoravna, jedna okomita — poplačene na odabrani razmak kako bi formirale mrežu, slično milimetarskom papiru.

Kada koristiti CSS uzorke umjesto slikovnih datoteka

CSS gradijentni uzorak nema veličinu datoteke niti HTTP zahtjev, pa se učitava trenutno i nikad ne izgleda zamućeno na high-DPI zaslonima, za razliku od rasterske PNG pozadinske pločice. Idealan je za suptilne teksture iza teksta, razdjelnike sekcija, ilustracije praznog stanja ili kartice-čuvare mjesta. Za složene ilustrirane ili fotografske uzorke, prava slika i dalje je pravi alat — CSS gradijenti najbolje odgovaraju jednostavnim, geometrijskim, ponavljajućim oblicima poput ovih ovdje.

Uparivanje s drugim CSS efektima

Uzorci dobro funkcioniraju kao pozadina iza glassmorphism kartica, jer zamućenju treba nešto s vizualnom teksturom iza sebe da bi bilo vidljivo. Također se prirodno slažu sa zaobljenim rubovima na spremniku elementa.

→ Generator CSS glassmorphisma · Generator border-radius

Često postavljana pitanja

Trebaju li ovi uzorci ikakve slikovne datoteke?

Ne. Svaki uzorak ovdje generira se isključivo CSS gradijentima kao background-image — nema PNG, SVG ili druge datoteke, pa nema dodatnog HTTP zahtjeva niti rizika od zamućenja na zaslonima visoke rezolucije.

Mogu li promijeniti koliko je uzorak velik?

Da — klizač veličine kontrolira background-size, koji određuje koliko je velika jedna ponavljajuća pločica uzorka. Manja veličina zbija točkice, pruge ili ćelije mreže bliže zajedno; veća veličina ih razdvaja.

Zašto uzorak šahovnice koristi dva gradijenta?

Jedan linear-gradient() može izmjenjivati boje samo u jednom smjeru. Slaganje dva gradijenta od 45 stupnjeva, pomaknuta jedan od drugog za pola pločice, proizvodi izmjenične svijetle/tamne kvadrate šahovnice — ovo je standardna tehnika za šahovnice izrađene samo u CSS-u.

Hoće li ovaj uzorak izgledati oštro na retina/high-DPI zaslonima?

Da. Budući da je uzorak matematički gradijent, a ne bitmapa slika, prikazuje se u rezoluciji koju zaslon treba, bez povećavanja ili zamućivanja — za razliku od male rasterske pločice slike razvučene ili ponavljane pri visokoj gustoći piksela.

Mogu li koristiti ove uzorke kao pozadinu cijele stranice?

Da — primijenite generirani background-image, background-size i background-position (gdje su prisutni) na body ili bilo koji spremnik pune širine. Vodite računa o kontrastu: gust, visoko-kontrastan uzorak iza teksta tijela može narušiti čitljivost, pa svjetlije/suptilnije postavke obično bolje funkcioniraju za velika pozadinska područja.