10 padrões de fundo CSS que você pode usar em seu site

Padrões de plano de fundo podem mudar radicalmente a aparência do seu site. Você pode criar facilmente padrões de fundo elegantes usando CSS que levarão o design do seu site para o próximo nível.

Abaixo está uma lista de 10 padrões de fundo que você pode usar em seus projetos.

1. O Hexágono Negro

O código nestes exemplos está disponível em um Repositório do GitHub e é gratuito para você usar sob o Licença MIT.

Este padrão de hexágono preto fornece um plano de fundo de rede hexagonal muito elegante. O título é claramente visível neste contexto. Você pode usar esse padrão se estiver projetando sites tecnológicos ou arquitetônicos.

Código HTML

<h1>O Hexágono Negro</h1>

Código CSS

corpo {
 família de fontes: 'Compartilhar tecnologia', sem serifa;
 tamanho da fonte: 68px;
 cor branca;
 exibição: flexível;
 jsutify-conteúdo: centro;
 alinhar-itens: centro;
 margem: 0;
 largura: 100vw;
 altura: 100vh;
 sombra de texto: 8px 8px 10px #0000008c;
 cor de fundo: #343a40;
 imagem de fundo: url("dados: imagem/svg+xml,%3Csvg xmlns=





instagram viewer

'http://www.w3.org/2000/svg' largura='28' altura='49' viewBox='0 0 28 49'%3E%3Cg regra de preenchimento='par ou ímpar'%3E%3Cg id='hexágonos' preencher ='%239C92AC' opacidade de preenchimento='0.25' regra de preenchimento ='diferente de zero'%3E%3Ccaminho 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-2v6.9zM0 15l12.98-7.5V0h-2v6. 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-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), gradiente linear (para o topo direito, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margem: 20px;
}

2. As tiras azuis

O padrão de fundo de tiras azuis usa o Gradiente linear Propriedade CSS para criar faixas de gradiente sobre um plano de fundo. Você pode mudar a cor de fundo e a cor gradiente para atender às suas necessidades.

Código HTML

<classe div="padrões pt1"></div>

Código CSS

corpo {
 margem: 0px;
}
.padrões {
 largura: 100vw;
 altura: 100vw;
}
.pt1 {
 tamanho do plano de fundo: 50px 50px;
 cor de fundo: #0ae;
imagem de fundo: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparente 50%, transparente);
imagem de fundo: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparente 50%, transparente);
imagem de fundo: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparente 50%, transparente);
imagem de fundo: -o-linear-gradiente(rgba(255, 255, 255, .2) 50%, transparente 50%, transparente);
imagem de fundo: Gradiente linear(rgba(255, 255, 255, .2) 50%, transparente 50%, transparente);
}

3. O tabuleiro de xadrez

Você pode criar facilmente um padrão de design de plano de fundo do tabuleiro de xadrez usando CSS. Tente ajustar as cores para variar este design.

Código HTML

<classe div="padrões pt1"></div>

Código CSS

corpo {
 margem: 0px;
}
.padrões {
 largura: 100vw;
 altura: 100vw;
}
.pt1 {
 cor de fundo: #eee;
 tamanho do plano de fundo: 60px 60px;
 posição de fundo: 0 0, 30px 30px;
 imagem de fundo: -webkit-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto), -webkit-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, Preto);
 imagem de fundo: -moz-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto), -moz-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, Preto);
 imagem de fundo: -ms-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto), -ms-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, Preto);
 imagem de fundo: -o-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto), -o-linear-gradient (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto);
 imagem de fundo: gradiente linear (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, preto), gradiente linear (45 graus, preto 25%, transparente 25%, transparente 75%, preto 75%, Preto);
}

4. O Mar Silencioso

Você pode usar esses padrões de linhas horizontais simples para adicionar um plano de fundo estático a qualquer elemento HTML.

Código HTML

<classe div="padrões pt1"></div>

Código CSS

corpo {
 margem: 0px;
}
.padrões {
 largura: 100vw;
 altura: 100vw;
}
.pt1 {
 cor de fundo: #026873;
 tamanho do plano de fundo: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
imagem de fundo: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparente 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparente 50%), -webkit-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .19) 50%);
imagem de fundo: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparente 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparente 50%), -moz-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .19) 50%);
imagem de fundo: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparente 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparente 50%), -ms-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, transparente 50%, rgba(255, 255, 255, .19) 50%);
imagem de fundo: -o-linear-gradiente(0, rgba(255, 255, 255, .07) 50%, transparente 50%), -o-linear-gradiente(0, rgba(255, 255, 255, .13) 50%, transparente 50%), -o-linear-gradiente(0, transparente 50%, rgba(255, 255, 255, .17) 50%), -o-linear-gradiente(0, transparente 50%, rgba(255, 255, 255, .19) 50%);
imagem de fundo: Gradiente linear(0, rgba(255, 255, 255, .07) 50%, transparente 50%), Gradiente linear(0, rgba(255, 255, 255, .13) 50%, transparente 50%), Gradiente linear(0, transparente 50%, rgba(255, 255, 255, .17) 50%), Gradiente linear(0, transparente 50%, rgba(255, 255, 255, .19) 50%);
}

5. O tijolo moderno

Você pode criar um padrão de tijolo moderno CSS puro usando o Gradiente linear propriedade CSS.

Código CSS

corpo {
 imagem de fundo: gradiente linear (45 graus, transparente 20%, preto 25%, transparente 25%),
 gradiente linear (-45 graus, transparente 20%, preto 25%, transparente 25%),
 gradiente linear (-45 graus, transparente 75%, preto 80%, transparente 0),
 gradiente radial (cinza 2px, transparente 0);
 tamanho do plano de fundo: 30px 30px, 30px 30px;
}

6. Plano de fundo estilo Web3

Você pode criar um Web3estilo de fundo usando uma imagem de fundo e adicionando um efeito de desfoque a ela. Este exemplo usa uma imagem de galáxia do Unsplash. Você pode ser criativo e usar uma imagem de uma galáxia, mar, monumentos ou qualquer outra coisa.

Código HTML

<classe div="cartão bg-blur">
<h1>Cartão com fundo gradiente</h1>
</div>

Código CSS

:raiz {
 --bg-imagem: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formato&ajustar = cortar&w=1169&q=80');
}
corpo {
 cor de fundo: #1D1E22;
 família de fontes: sem serifa;
 exibição: flexível;
}
.cartão {
 margem: automático;
 preenchimento: 1rem;
 altura: 300px;
 largura: 300px;
 alinhamento de texto: centro;
 cor branca;
 exibição: flexível;
 alinhar-itens: centro;
 justificar-conteúdo: centro;
 posição: relativa;
 cor de fundo: cinza;
 raio da borda: 10px;
}
.bg-blur {
 estouro: oculto;
 cor de fundo: transparente;
}
.bg-blur::antes {
 contente: '';
 imagem de fundo: var(--bg-imagem);
 tamanho do fundo: capa;
 altura: 100%;
 largura: 100%;
 posição: absoluta;
 filtro: desfoque (30px);
 índice z: -1;
}

7. Animação de fundo gradiente

Plano de fundo gradiente animações são amplamente utilizadas em sites modernos. Fique na moda e use a animação gradiente com o plano de fundo. Você também pode personalizar as cores do gradiente de acordo com suas necessidades.

Código HTML

<classe div="d-flex flex-coluna justificar-conteúdo-centro w-100 h-100"></div>

Código CSS

corpo {
fundo: Gradiente linear(-45 graus, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 tamanho do plano de fundo: 400% 400%;
 animação: gradiente 15s facilita infinito;
 altura: 100vh;
}
@keyframes gradiente {
 0% {
 posição de fundo: 0% 50%;
 }
50% {
 posição de fundo: 100% 50%;
 }
100% {
 posição de fundo: 0% 50%;
 }
}

8. Ondas Curvas

Você pode criar um padrão simples de ondas curvas usando o gradiente radial propriedade CSS.

Código HTML

<classe div="padrões pt1"></div>

Código CSS

corpo {
 margem: 0px;
}
.padrões {
 largura: 100vw;
 altura: 100vw;
}
.pt1 {
fundo: -moz-radial-gradiente(0% 2%, círculo, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradiente(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), Nenhum;
fundo: -webkit-radial-gradient(0% 2%, círculo, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), Nenhum;
fundo: -ms-radial-gradient(0% 2%, círculo, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), Nenhum;
fundo: -o-radial-gradiente(0% 2%, círculo, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradiente(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), Nenhum;
fundo: gradiente radial(0% 2%, círculo, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), gradiente radial(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), Nenhum;
 tamanho do plano de fundo: 20px 20px;
}

9. Toalha de mesa

Precisa de um padrão de plano de fundo padrão para sua div HTML? Experimente este padrão de toalha de mesa.

Código CSS

corpo {
 fundo: branco;
imagem de fundo: Gradiente linear(90grau, rgba(200,0,0,.5) 50%, transparente 0),
Gradiente linear(rgba(200,0,0,.5) 50%, transparente 0);
 tamanho do plano de fundo: 30px 30px;
}

10. Diagonais deslizantes

Neste efeito, as cores diagonais deslizam e se sobrepõem umas às outras. A animação suave da mistura de cores pode adicionar um toque atraente ao seu site.

Código HTML

<classe div="bg"></div>
<classe div="bg bg2"></div>
<classe div="bg bg3"></div>
<classe div="contente">
<h1>Efeito de fundo de diagonais deslizantes</h1>
</div>

Código CSS

html{
altura:100%;
}
corpo {
margem:0;
}
.bg {
animação:slide 3sfacilidade de entradainfinitoalternar;
imagem de fundo: Gradiente linear(-60 graus, #6c3 50%, #09f 50%);
inferior:0;
deixou:-50%;
opacidade:.5;
posição:fixo;
direita:-50%;
topo:0;
índice z:-1;
}
.bg2 {
direção de animação:alternativo-reverso;
duração da animação:4s;
}
.bg3 {
duração da animação:5s;
}
.contente {
cor de fundo:rgba (255,255,255,.8);
raio de borda:.25em;
Sombra da caixa:0 0 .25emrgba(0,0,0,.25);
dimensionamento de caixa:border-box;
deixou:50%;
preenchimento:10vmin;
posição:fixo;
alinhamento de texto:Centro;
topo:50%;
transformar:traduzir(-50%, -50%);
}
h1 {
família de fontes:monoespaço;
}
@keyframes slide {
 0% {
transformar:translateX(-25%);
 }
100% {
transformar:translateX(25%);
 }
}

Aprimore seu site usando CSS

Use esses padrões de plano de fundo CSS para enfeitar o design do seu site. Você também pode aumentar sua produtividade CSS usando algumas dicas e truques interessantes de CSS. Eles podem ajudá-lo a criar designs elegantes em CSS com apenas algumas linhas de código.

8 dicas e truques essenciais de CSS que todo desenvolvedor deve saber

Leia a seguir

Sobre o autor