Pular para o conteúdo
Início » 10 planos de fundo CSS para usar no seu site

10 planos de fundo CSS para usar no seu site

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.

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.

pacote fullstack danki code

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.

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.

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.

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

Marcações:
Brayan Monteiro

Brayan Monteiro

Bacharel em Sistemas de Informação pela Faculdade Maurício de Nassau e desenvolvedor PHP. Além de programador, produzo conteúdo e gerencio blogs. Sou especialista em desenvolvimento de software, SEO de sites e em negócios digitais.

Participe da conversa

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

5 × 1 =

Postagens Relacionadas

variáveis em javascript

Como carregar imagens lentamente usando HTML e JavaScript

código css

Uma introdução às transições CSS para iniciantes

Imagem em destaque para a postagem "O guia completo sobre Markdown"

O guia completo sobre Markdown

Tailwind CSS

Guia completo para iniciantes sobre Tailwind CSS