Generator pattern de fundal CSS

Exemple de pattern-uri de fundal

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Buline Un radial-gradient mic, repetat de background-size.

.element {
  background-color: #eff6ff;
  background-image: radial-gradient(#2563eb 4px, transparent 5px);
  background-size: 24px 24px;
}

Tablă de șah Un gradient conic cu patru sferturi alternante.

.element {
  background-color: #f8fafc;
  background-image: repeating-conic-gradient(#0f172a 0 25%, transparent 0 50%);
  background-size: 40px 40px;
}

Caiet dictando O linie subțire la fiecare 28px.

.element {
  background-color: #ffffff;
  background-image: linear-gradient(#bfdbfe 1px, transparent 1px);
  background-size: 100% 28px;
}

Dungi de avertizare Galben și negru la 45 de grade.

.element {
  background-color: #0f172a;
  background-image: repeating-linear-gradient(45deg, #facc15 0 20px, transparent 20px 40px);
}

Hârtie milimetrică Două gradiente, unul orizontal și unul vertical.

.element {
  background-color: #ffffff;
  background-image: linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

Zig-zag Patru gradiente diagonale decalate.

.element {
  background-color: #fdf2f8;
  background-image: linear-gradient(135deg, #ec4899 25%, transparent 25%),
    linear-gradient(225deg, #ec4899 25%, transparent 25%),
    linear-gradient(315deg, #ec4899 25%, transparent 25%),
    linear-gradient(45deg, #ec4899 25%, transparent 25%);
  background-position: -20px 0, -20px 0, 0 0, 0 0;
  background-size: 40px 40px;
}

Romburi Tabla de șah rotită cu 45 de grade.

.element {
  background-color: #f5f3ff;
  background-image: repeating-conic-gradient(from 45deg, #7c3aed 0 25%, transparent 0 50%);
  background-size: 32px 32px;
}

Buline discrete Puncte mici și dese, ca textură de fundal pentru secțiuni.

.element {
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1px, transparent 2px);
  background-size: 16px 16px;
}

Cum folosești generatorul de pattern

Alege tipul: buline, carouri, linii, dungi diagonale, grilă (hârtie milimetrică), zig-zag sau romburi.
Alege cele două culori: fundalul și culoarea desenului.
Reglează mărimea (în px), adică dimensiunea unei plăci care se repetă, și grosimea liniei.
Copiază codul: background-color, background-image, background-size și, la unele modele, background-position.

Modele din gradienturi

Un gradient cu opriri de culoare lipite unele de altele dă margini nete în loc de treceri line. Așa se desenează forme:

radial-gradient() desenează cercuri, deci buline.
linear-gradient() și repeating-linear-gradient() desenează linii și dungi.
conic-gradient() împarte placa în sectoare, potrivit pentru carouri.

.buline {
  background-color: #fff;
  background-image: radial-gradient(#94a3b8 2px, transparent 2px);
  background-size: 20px 20px;
}
.dungi {
  background: repeating-linear-gradient(45deg, #e2e8f0 0 10px, #fff 10px 20px);
}
.carouri {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 40px 40px;
}

background-size controlează repetarea

Gradientul umple o placă de mărimea dată în background-size, iar browserul o repetă pe toată suprafața. Placa mai mică dă un model mai des.

Mai multe straturi

background-image acceptă mai multe imagini despărțite prin virgulă; prima este desenată deasupra. Grila de tip hârtie milimetrică e făcută din două straturi de linii, unul orizontal și unul vertical:

.grila {
  background-color: #fff;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

background-position poate decala un strat față de altul, de exemplu cu jumătate de placă, pentru zig-zag sau romburi. Despre gradienturi în detaliu afli din generatorul de gradient.

Întrebări frecvente

Pattern-ul din CSS e mai rapid decât o imagine?

De obicei da: nu face nicio cerere în plus la server și arată clar pe orice ecran, la orice zoom.

Cum pun pattern-ul peste o culoare sau o poză?

Adaugă stratul suplimentar la finalul listei din background-image, ca să fie desenat dedesubt, și ține culorile modelului semitransparente.