Generator de modele de fundal CSS

Acest instrument generează modele de fundal repetitive folosind doar gradienți CSS — fără fișiere imagine necesare. Alege buline, dungi diagonale, o tablă de șah sau linii de grilă, ajustează culorile și spațierea, și copiază CSS-ul background-image direct în foaia ta de stiluri.

Ce este acest instrument?

CSS poate desena modele repetitive fără niciun fișier imagine, folosind gradienți — radial-gradient() și linear-gradient() — ca background-image, combinați cu un background-size mai mic decât elementul, astfel încât gradientul se pavează și se repetă. Bulinele folosesc un repeating radial-gradient, dungile și tabla de șah folosesc linear-gradient() repetat sau stratificat, iar liniile de grilă folosesc două linii linear-gradient() suprapuse.

Acest instrument construiește acele declarații de gradient pentru tine. Alege un tip de model, ajustează culoarea modelului, culoarea de fundal și spațierea, și urmărește previzualizarea live actualizându-se — apoi copiază CSS-ul exact pentru background-image și background-size.

Sursă: CSS Images Module Level 3, W3C — definește repeating-linear-gradient() și repeating-radial-gradient(), funcțiile din care sunt construite aceste modele.

De ce să-l folosești?

Fără fișiere imagine, fără cereri HTTP — modelul este CSS pur și se randează instant la orice rezoluție, inclusiv pe ecrane retina/high-DPI.
Culoare și spațiere complet ajustabile, fără să scrii manual sintaxă de gradient sau să calculezi matematica de pavare.
Previzualizarea live arată exact modelul repetitiv înainte să copiezi ceva.
Se scalează curat, fiind matematică vectorială, nu o imagine raster — fără neclaritate când elementul își schimbă dimensiunea.
Rulează complet în browserul tău — nimic din ce configurezi nu este încărcat nicăieri.
Gratuit, fără înregistrare, funcționează pe mobil.

Cum se folosește

Alege un tip de model: buline, dungi diagonale, tablă de șah sau linii de grilă.
Alege culoarea modelului și culoarea de fundal care se vede între/în spatele formelor modelului.
Ajustează sliderul de dimensiune pentru a face bulinele, dungile sau celulele grilei mai mari sau mai mici — asta controlează și cât de dens se repetă modelul.
Copiază CSS-ul generat și lipește-l ca background-image (și background-size/background-position unde este afișat) al oricărui element.

Exemplu

Intrare

Model: buline · Culoare: albastru · Fundal: alb · Dimensiune: 24px

Rezultat

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

Un model clasic de buline deschise, adesea folosit ca fundal subtil de secțiune sau textură de card.

Cum este construit fiecare model

Buline: un radial-gradient() desenează un mic cerc plin, apoi background-size îl face să se repete ca o grilă pavată de puncte.
Dungi diagonale: un repeating-linear-gradient() la un unghi de 45 de grade alternează între culoarea modelului și culoarea de fundal la un interval fix.
Tablă de șah: două straturi linear-gradient() suprapuse la 45 de grade, decalate unul față de celălalt cu jumătate de piesă, produc pătrate alternante deschise/închise.
Linii de grilă: două linii subțiri linear-gradient() — una orizontală, una verticală — pavate la spațierea aleasă pentru a forma o grilă, similară hârtiei milimetrice.

Când să folosești modele CSS în loc de fișiere imagine

Un model de gradient CSS nu are dimensiune de fișier și nicio cerere HTTP, deci se încarcă instant și nu arată niciodată neclar pe ecrane high-DPI, spre deosebire de o piesă de fundal raster PNG. Este ideal pentru texturi subtile în spatele textului, separatoare de secțiuni, ilustrații pentru stări goale sau carduri de tip placeholder. Pentru modele ilustrate sau fotografice complexe, o imagine reală este în continuare instrumentul potrivit — gradienții CSS sunt cei mai potriviți pentru forme geometrice simple și repetitive, precum cele de aici.

Combinarea cu alte efecte CSS

Modelele funcționează bine ca fundal în spatele cardurilor glassmorphism, deoarece estomparea are nevoie de ceva cu textură vizuală în spate pentru a fi vizibilă. Se combină de asemenea natural cu colțuri rotunjite pe elementul container.

→ Generator CSS Glassmorphism · Generator Border Radius

Întrebări frecvente

Aceste modele necesită fișiere imagine?

Nu. Fiecare model de aici este generat pur cu gradienți CSS ca background-image — nu există niciun PNG, SVG sau alt fișier implicat, deci nu există nicio cerere HTTP suplimentară și niciun risc de neclaritate pe ecrane de rezoluție înaltă.

Pot schimba cât de mare este modelul?

Da — sliderul de dimensiune controlează background-size, care setează cât de mare este o piesă repetitivă a modelului. O dimensiune mai mică apropie bulinele, dungile sau celulele grilei; una mai mare le răspândește.

De ce modelul tablă de șah folosește doi gradienți?

Un singur linear-gradient() poate alterna culorile doar de-a lungul unei singure direcții. Stratificarea a doi gradienți la 45 de grade, decalați unul față de celălalt cu jumătate de piesă, este ceea ce produce pătratele alternante deschise/închise ale unei table de șah — aceasta este tehnica standard pentru table de șah doar-CSS.

Acest model va arăta clar pe ecrane retina/high-DPI?

Da. Fiindcă modelul este un gradient matematic, nu o imagine bitmap, este randat la orice rezoluție are nevoie ecranul, fără upscaling sau neclaritate — spre deosebire de o mică piesă de imagine raster întinsă sau repetată la densitate mare de pixeli.

Pot folosi aceste modele ca fundal pentru o pagină întreagă?

Da — aplică background-image, background-size și background-position (unde sunt prezente) generate pe body sau orice element container cu lățime completă. Ține cont de contrast: un model aglomerat, cu contrast ridicat, în spatele textului paginii poate afecta lizibilitatea, deci setările mai deschise/subtile funcționează de obicei mai bine pentru zone mari de fundal.