planos de fundo CSS
Compartilhar:

Procurando inspiração para o plano de fundo do seu site? Confira esses padrões CSS que podem ser usados ​​em diversas situações.

🚨DICA: Crie um projeto de programação web com HTML5CSS3 JavaScript do zero em 3 aulas: MiniCurso Gratuito! 🚀

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

Abaixo estão listados 10 padrões de fundo que você pode usar em seus projetos.

fullstack javascript onebitcode

1. O Hexágono Preto

NOTA: O código nesses exemplos está disponível no repositório GitHub e está disponível gratuitamente sob a licença MIT.

Este padrão hexagonal preto fornece um fundo de grade hexagonal muito elegante. Neste caso, o título é claramente visível. Você pode usar esse padrão se estiver projetando um site técnico ou de arquitetura.

Código HTML

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

Código CSS

body {
    font-family: 'Share Tech', sans-serif;
    font-size: 68px;
    color: white;
   display: flex;
    jsutify-content: center;
   align-items: center;
   margin: 0;
    width: 100vw;
    height: 100vh;
    text-shadow: 8px 8px 10px #0000008c;
    background-color: #343a40;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath 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.35L0 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"), linear-gradient(to right top, #343a40, #2b2c31, #211f22, #151314, #000000);
}
 
h1 {
    margin: 20px;
}

2. As Tiras Azuis

O padrão de plano de fundo listrado azul usa a propriedade CSS linear-gradient para criar listras de gradiente no plano de fundo. Você pode alterar a cor de fundo e a cor do gradiente para atender às suas necessidades.

Código HTML

<div class="patterns pt1"></div>

Código CSS

body {
    margin: 0px;
}
 
.patterns {
    width: 100vw;
    height: 100vw;
}
 
.pt1 {
    background-size: 50px 50px;
    background-color: #0ae;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

3. O Tabuleiro de Xadrez

Você pode criar facilmente um padrão de design de plano de fundo quadriculado usando CSS. Tente ajustar as cores para mudar este design.

Banner Amazon Notebook 300x300

Código HTML

<div class="patterns pt1"></div>

Código CSS

body {
    margin: 0px;
}
 
.patterns {
    width: 100vw;
    height: 100vw;
}
 
.pt1 {
    background-color: #eee;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

4. O Mar Silencioso

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

Código HTML

<div class="patterns pt1"></div>

Código CSS

body {
    margin: 0px;
}
 
.patterns {
    width: 100vw;
    height: 100vw;
}
 
.pt1 {
    background-color: #026873;
    background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
    background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
    background-image: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
    background-image: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
    background-image: -o-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
    background-image: linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
}

5. Tijolos Modernos

Você pode criar padrões de tijolos modernos CSS puros usando a propriedade CSS linear-gradient.

Código CSS

body {
    background-image: linear-gradient(45deg, transparent 20%, black 25%, transparent 25%),
                      linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%),
                      linear-gradient(-45deg, transparent 75%, black 80%, transparent 0),
                      radial-gradient(gray 2px, transparent 0);
    background-size: 30px 30px, 30px 30px;
}

6. Plano de fundo estilo Web3

Você pode usar uma imagem de plano de fundo para criar um plano de fundo no estilo Web3 e adicionar um desfoque a ele. Este exemplo usa a imagem da galáxia Unsplash. Você pode ser criativo e usar imagens de galáxias, oceanos, monumentos ou qualquer outra coisa.

Código HTML

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

Código CSS

:root {
    --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80');
}
 
body {
    background-color: #1D1E22;
    font-family: sans-serif;
    display: flex;
}
 
.card {
    margin: auto;
    padding: 1rem;
    height: 300px;
   width: 300px;
    text-align: center;
   color: white;
    display: flex;
   align-items: center;
    justify-content: center;
   position: relative;
    background-color: gray;
   border-radius: 10px;
}
 
.bg-blur {
   overflow: hidden;
    background-color: transparent;
}
 
.bg-blur::before {
   content: '';
    background-image: var(--bg-image);
   background-size: cover;
    height: 100%;
   width: 100%;
    position: absolute;
   filter: blur(30px);
    z-index: -1;
}

7. Animação de fundo gradiente

Animações de fundo gradiente são amplamente utilizadas em sites modernos. Mantenha-o elegante e use animações de gradiente em segundo plano. Você também pode personalizar a cor do gradiente de acordo com suas necessidades.

Banner Amazon Livros de Programação 300x300

Código HTML

<div class="d-flex flex-column justify-content-center w-100 h-100"></div>

Código CSS

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0% 50%;
    }
}

8. Ondas curvas

Você pode criar formas de onda curvas simples usando a propriedade CSS gradiente radial.

Código HTML

<div class="patterns pt1"></div>

Código CSS

body {
    margin: 0px;
}
 
.patterns {
    width: 100vw;
    height: 100vw;
}
 
.pt1 {
    background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: -webkit-radial-gradient(0% 2%, circle, 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), none;
    background: -ms-radial-gradient(0% 2%, circle, 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), none;
    background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
    background-size: 20px 20px;
}

9. Toalhas de mesa

Precisa de um padrão de fundo padrão para divs HTML? Experimente este padrão de toalha de mesa.

Código CSS

body {
    background: white;
    background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                      linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
    background-size: 30px 30px;
}

10. Diagonal deslizante

Nesse efeito, as cores diagonais deslizam e se sobrepõem. Animações de mistura de cores suaves podem adicionar um toque atraente ao seu site.

Código HTML

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content">
    <h1>Efeito de fundo de diagonais deslizantes</h1>
</div>

Código CSS

html {
    height:100%;
}
 
body {
    margin:0;
}
 
.bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
}
 
.bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
}
 
.bg3 {
    animation-duration:5s;
}
 
.content {
    background-color:rgba(255,255,255,.8);
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    left:50%;
    padding:10vmin;
    position:fixed;
    text-align:center;
    top:50%;
    transform:translate(-50%, -50%);
}
 
h1 {
    font-family:monospace;
}
 
@keyframes slide {
    0% {
        transform:translateX(-25%);
    }
 
    100% {
        transform:translateX(25%);
    }
}

Leia também: 6 melhores aplicativos antivírus para Android

Melhore seu site com CSS

Embeleze o design do seu site com esses padrões de plano de fundo CSS. Você também pode aumentar sua produtividade CSS usando algumas dicas e truques interessantes de CSS. Eles ajudam você a criar designs CSS elegantes com apenas algumas linhas de código.

Banner Amazon Celular 300x300

Atenção! Descubra os melhores cursos de programação neste guia especial: Cursos de Programação.

Postagens Semelhantes