10 modelli di sfondo CSS che puoi utilizzare sul tuo sito web

I motivi di sfondo possono cambiare radicalmente l'aspetto del tuo sito web. Puoi facilmente creare eleganti pattern di sfondo usando i CSS che porteranno il design del tuo sito a un livello superiore.

Di seguito è riportato un elenco di 10 motivi di sfondo che puoi utilizzare nei tuoi progetti.

1. L'esagono nero

Il codice in questi esempi è disponibile in a Archivio GitHub ed è gratuito per l'uso sotto il Licenza MIT.

Questo motivo esagonale nero fornisce uno sfondo di rete esagonale molto pulito. Il titolo è chiaramente visibile su questo sfondo. Puoi utilizzare questo modello se stai progettando siti Web tecnologici o architettonici.

Codice HTML

<h1>L'esagono nero</h1>

Codice CSS

corpo {
 famiglia di font: 'Condividi Tech', sans-serif;
 dimensione del carattere: 68px;
 colore bianco;
 display: flessibile;
 jsutify-content: centro;
 allineare-elementi: centro;
 margine: 0;
 larghezza: 100vw;
 altezza: 100vh;
 testo-ombra: 8px 8px 10px #0000008c;
 colore di sfondo: #343a40;
 immagine di sfondo: url("dati: immagine/svg+xml,%3Csvg xmlns=





instagram viewer

'http://www.w3.org/2000/svg' larghezza='28' altezza='49' viewBox='0 0 28 49'%3E%3Cg regola di riempimento='pari dispari'%3E%3Cg id='esagoni' riempire='%239C92AC' riempimento-opacità='0.25' regola di riempimento='diverso da zero'%3E%3Cpercorso d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-. 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), gradiente lineare (in alto a destra, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margine: 20px;
}

2. Le strisce blu

Il motivo di sfondo a strisce blu utilizza il gradiente lineare Proprietà CSS per creare strisce sfumate su uno sfondo. Puoi cambia il colore di sfondo e il colore sfumato per soddisfare le tue esigenze.

Codice HTML

<classe div="modelli pt1"></div>

Codice CSS

corpo {
 margine: 0px;
}
.modelli {
 larghezza: 100vw;
 altezza: 100vw;
}
.pt1 {
 dimensione dello sfondo: 50px 50px;
 colore di sfondo: #0ae;
immagine di sfondo: -webkit-lineare-gradiente(rgba(255, 255, 255, .2) 50%, trasparente 50%, trasparente);
immagine di sfondo: -moz-lineare-gradiente(rgba(255, 255, 255, .2) 50%, trasparente 50%, trasparente);
immagine di sfondo: -ms-gradiente-lineare(rgba(255, 255, 255, .2) 50%, trasparente 50%, trasparente);
immagine di sfondo: -o-gradiente-lineare(rgba(255, 255, 255, .2) 50%, trasparente 50%, trasparente);
immagine di sfondo: gradiente lineare(rgba(255, 255, 255, .2) 50%, trasparente 50%, trasparente);
}

3. La scacchiera

Puoi facilmente creare un modello di progettazione di sfondo a scacchiera usando i CSS. Prova a regolare i colori per variare questo disegno.

Codice HTML

<classe div="modelli pt1"></div>

Codice CSS

corpo {
 margine: 0px;
}
.modelli {
 larghezza: 100vw;
 altezza: 100vw;
}
.pt1 {
 colore di sfondo: #eee;
 dimensione dello sfondo: 60px 60px;
 posizione di sfondo: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero), -webkit-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, Nero);
 background-image: -moz-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero), -moz-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, Nero);
 background-image: -ms-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero), -ms-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, Nero);
 background-image: -o-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero), -o-linear-gradient (45deg, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero);
 immagine di sfondo: gradiente lineare (45 gradi, nero 25%, trasparente 25%, trasparente 75%, nero 75%, nero), gradiente lineare (45 gradi, nero 25%, trasparente 25%, trasparente 75%, nero 75%, Nero);
}

4. Il mare silenzioso

Puoi utilizzare questi semplici modelli di linee orizzontali per aggiungere uno sfondo statico a qualsiasi elemento HTML.

Codice HTML

<classe div="modelli pt1"></div>

Codice CSS

corpo {
 margine: 0px;
}
.modelli {
 larghezza: 100vw;
 altezza: 100vw;
}
.pt1 {
 colore di sfondo: #026873;
 dimensione dello sfondo: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
immagine di sfondo: -webkit-lineare-gradiente(0, rgba(255, 255, 255, .07) 50%, trasparente 50%), -webkit-lineare-gradiente(0, rgba(255, 255, 255, .13) 50%, trasparente 50%), -webkit-lineare-gradiente(0, trasparente 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineare-gradiente(0, trasparente 50%, rgba(255, 255, 255, .19) 50%);
immagine di sfondo: -moz-lineare-gradiente(0, rgba(255, 255, 255, .07) 50%, trasparente 50%), -moz-lineare-gradiente(0, rgba(255, 255, 255, .13) 50%, trasparente 50%), -moz-lineare-gradiente(0, trasparente 50%, rgba(255, 255, 255, .17) 50%), -moz-lineare-gradiente(0, trasparente 50%, rgba(255, 255, 255, .19) 50%);
immagine di sfondo: -ms-gradiente-lineare(0, rgba(255, 255, 255, .07) 50%, trasparente 50%), -ms-gradiente-lineare(0, rgba(255, 255, 255, .13) 50%, trasparente 50%), -ms-gradiente-lineare(0, trasparente 50%, rgba(255, 255, 255, .17) 50%), -ms-gradiente-lineare(0, trasparente 50%, rgba(255, 255, 255, .19) 50%);
immagine di sfondo: -o-gradiente-lineare(0, rgba(255, 255, 255, .07) 50%, trasparente 50%), -o-gradiente-lineare(0, rgba(255, 255, 255, .13) 50%, trasparente 50%), -o-gradiente-lineare(0, trasparente 50%, rgba(255, 255, 255, .17) 50%), -o-gradiente-lineare(0, trasparente 50%, rgba(255, 255, 255, .19) 50%);
immagine di sfondo: gradiente lineare(0, rgba(255, 255, 255, .07) 50%, trasparente 50%), gradiente lineare(0, rgba(255, 255, 255, .13) 50%, trasparente 50%), gradiente lineare(0, trasparente 50%, rgba(255, 255, 255, .17) 50%), gradiente lineare(0, trasparente 50%, rgba(255, 255, 255, .19) 50%);
}

5. Il mattone moderno

Puoi creare un modello di mattoni moderno CSS puro usando il gradiente lineare proprietà CSS.

Codice CSS

corpo {
 immagine di sfondo: gradiente lineare (45deg, trasparente 20%, nero 25%, trasparente 25%),
 gradiente lineare (-45 gradi, trasparente 20%, nero 25%, trasparente 25%),
 gradiente lineare (-45 gradi, trasparente 75%, nero 80%, trasparente 0),
 gradiente radiale (grigio 2px, trasparente 0);
 dimensione dello sfondo: 30px 30px, 30px 30px;
}

6. Sfondo stile Web3

Puoi creare un Web3-stile di sfondo utilizzando un'immagine di sfondo e aggiungendo un effetto sfocato. Questo esempio usa un'immagine della galassia da Unsplash. Puoi essere creativo e utilizzare l'immagine di una galassia, di un mare, di monumenti o di qualsiasi altra cosa.

Codice HTML

<classe div="carta bg-sfocatura">
<h1>Carta con sfondo sfumato</h1>
</div>

Codice CSS

:radice {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&automatico=formato&adattare = ritagliare&w=1169&q=80');
}
corpo {
 colore di sfondo: #1D1E22;
 famiglia di caratteri: sans-serif;
 display: flessibile;
}
.carta {
 margine: automatico;
 imbottitura: 1rem;
 altezza: 300px;
 larghezza: 300px;
 allineamento testo: centro;
 colore bianco;
 display: flessibile;
 allineare-elementi: centro;
 giustificare-contenuto: centro;
 posizione: relativa;
 colore di sfondo: grigio;
 raggio di confine: 10px;
}
.bg-sfocatura {
 overflow: nascosto;
 colore di sfondo: trasparente;
}
.bg-sfocatura::prima {
 contenuto: '';
 immagine di sfondo: var(--bg-immagine);
 dimensione dello sfondo: copertina;
 altezza: 100%;
 larghezza: 100%;
 posizione: assoluta;
 filtro: sfocatura (30px);
 indice z: -1;
}

7. Animazione di sfondo sfumato

Sfondo sfumato le animazioni sono ampiamente utilizzate nei siti Web moderni. Rimani alla moda e usa l'animazione del gradiente con lo sfondo. Puoi anche personalizzare i colori sfumati in base alle tue esigenze.

Codice HTML

<classe div="d-flex flex-colonna justify-content-center w-100 h-100"></div>

Codice CSS

corpo {
sfondo: gradiente lineare(-45 gradi, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 dimensione dello sfondo: 400% 400%;
 animazione: gradiente 15s facilità infinito;
 altezza: 100vh;
}
@fotogrammi chiave gradiente {
 0% {
 posizione di sfondo: 0% 50%;
 }
50% {
 posizione di sfondo: 100% 50%;
 }
100% {
 posizione di sfondo: 0% 50%;
 }
}

8. Onde sinuose

Puoi creare un semplice motivo a onde sinuose usando il gradiente radiale proprietà CSS.

Codice HTML

<classe div="modelli pt1"></div>

Codice CSS

corpo {
 margine: 0px;
}
.modelli {
 larghezza: 100vw;
 altezza: 100vw;
}
.pt1 {
sfondo: -moz-radiale-gradiente(0% 2%, cerchio, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiale-gradiente(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nessuno;
sfondo: -webkit-radiale-gradiente(0% 2%, cerchio, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radiale-gradiente(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nessuno;
sfondo: -ms-gradiente-radiale(0% 2%, cerchio, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-gradiente-radiale(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nessuno;
sfondo: -o-gradiente-radiale(0% 2%, cerchio, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-gradiente-radiale(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nessuno;
sfondo: gradiente radiale(0% 2%, cerchio, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), gradiente radiale(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), nessuno;
 dimensione dello sfondo: 20px 20px;
}

9. Tovaglia

Hai bisogno di un motivo di sfondo standard per il tuo div HTML? Prova questo modello di tovaglia.

Codice CSS

corpo {
 sfondo: bianco;
immagine di sfondo: gradiente lineare(90gradi, rgba(200,0,0,.5) 50%, trasparente 0),
gradiente lineare(rgba(200,0,0,.5) 50%, trasparente 0);
 dimensione dello sfondo: 30px 30px;
}

10. Diagonali scorrevoli

In questo effetto, i colori diagonali scorrono e si sovrappongono tra loro. L'animazione fluida della miscelazione dei colori può aggiungere un tocco attraente al tuo sito web.

Codice HTML

<classe div="bg"></div>
<classe div="bg bg2"></div>
<classe div="bg bg3"></div>
<classe div="contenuto">
<h1>Effetto di sfondo diagonali scorrevoli</h1>
</div>

Codice CSS

html {
altezza:100%;
}
corpo {
margine:0;
}
.bg {
animazione:vetrino 3Sfacilità d'ingressoinfinitoalternato;
immagine di sfondo: gradiente lineare(-60 gradi, # 6c3 50%, #09f 50%);
metter il fondo a:0;
sinistra:-50%;
opacità:.5;
posizione:fisso;
giusto:-50%;
superiore:0;
indice z:-1;
}
.bg2 {
animazione-direzione:alternativo-inverso;
animazione-durata:4s;
}
.bg3 {
animazione-durata:5s;
}
.contenuto {
colore di sfondo:rgba (255,255,255,.8);
raggio di confine:.25 em;
scatola-ombra:0 0 .25 emrgba(0,0,0,.25);
dimensioni della scatola:bordo-scatola;
sinistra:50%;
imbottitura:10 min;
posizione:fisso;
allineamento del testo:centro;
superiore:50%;
trasformare:traduci(-50%, -50%);
}
h1 {
famiglia di font:monospazio;
}
@fotogrammi chiave vetrino {
 0% {
trasformare:translateX(-25%);
 }
100% {
trasformare:translateX(25%);
 }
}

Abbellisci il tuo sito web usando i CSS

Usa questi pattern di sfondo CSS per abbellire il design del tuo sito web. Puoi anche aumentare la tua produttività CSS usando alcuni fantastici suggerimenti e trucchi CSS. Possono aiutarti a creare design eleganti in CSS con poche righe di codice.

8 suggerimenti e trucchi CSS essenziali che ogni sviluppatore dovrebbe conoscere

Leggi Avanti

Circa l'autore