Design / CSS

Generatore di pattern CSS (strisce, puntini, griglia, scacchiera)

Crea pattern di sfondo ripetuti usando solo gradienti CSS: strisce, strisce diagonali, linee a griglia, puntini, scacchiera e zigzag, con i tuoi due colori, le dimensioni e lo spessore delle linee. Poi copia il CSS.

Generatore di pattern CSS (strisce, puntini, griglia, scacchiera): Ogni pattern usa uno o due gradienti CSS ripetuti alla dimensione che scegli: repeating-linear-gradient per le strisce, due gradienti lineari sovrapposti per la griglia, radial-gradient per i puntini e repeating-conic-gradient per la scacchiera. Non viene usato alcun file immagine, quindi il pattern resta nitido a qualsiasi zoom e non richiede dati da caricare. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria
Strumenti per sviluppatori
Esecuzioni
Nel browser
Costo
Gratuito · senza registrazione
Disponibilità
Pronto all'uso
Generatore di motivi CSSElaborazione locale

Funziona interamente nel browser

CSS

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

Ogni motivo viene creato esclusivamente con gradienti CSS, quindi non c’è alcuna immagine da scaricare, resta nitido a qualsiasi livello di zoom e i colori possono essere modificati nel foglio di stile. Mantieni discreti i motivi dietro al testo: un basso contrasto tra i due colori rende il testo leggibile.

Come viene disegnata una scacchiera

repeating-conic-gradient(#000 0 25%, transparent 0 50%) colora il primo e il terzo quarto di giro intorno al centro di ogni tassello, creando due quadrati diagonali per tassello; background-size imposta il tassello a una dimensione doppia rispetto a quella del quadrato.

Combinare i pattern

Le immagini di sfondo si sovrappongono: inserisci un gradiente del generatore di gradienti CSS dopo un pattern, separandoli con una virgola, e il pattern si troverà sopra il gradiente.

Come usarlo

  1. Scegli un pattern.
  2. Scegli i due colori, la dimensione della ripetizione e lo spessore delle linee o la dimensione dei puntini.
  3. Copia il CSS.

Privacy e limitazioni

Tutto funziona nel browser.

Strumenti correlati

Gradiente CSSonda SVGGlassmorphism

Domande frequenti

I pattern funzionano in tutti i browser?

Sì: tutti i browser attuali supportano questi gradienti, incluso il gradiente conico usato per la scacchiera.

Come faccio a mettere un pattern dietro al testo?

Scegli due colori simili, così il pattern resta discreto e il testo mantiene un contrasto sufficiente.

Posso cambiare l'angolazione delle strisce?

Sì: modifica l'angolo in repeating-linear-gradient nel CSS copiato, ad esempio usa 60deg invece di 45deg.

Strumento gratuito · nel browser esecuzioni · senza account