Background Size, Position e Gradientes CSS | Web Academy

Web-Zoneware — Wed, 21 Oct 2026 19:42:32 +0000

Finalizamos o Módulo 1: Fundamentos, Sintaxe & Seletores explorando o arsenal mais expressivo e visual do design de interfaces web: o dimensionamento dinâmico de imagens, o alinhamento posicional milimétrico e a geração procedural de gradientes no CSS. Ao compreender como o navegador renderiza cover, contain e calcula transições de cores matemáticas com linear-gradient(), radial-gradient() e conic-gradient(), você será capaz de construir interfaces com profundidade tridimensional, gráficos de pizza e efeitos de iluminação modernos com zero bytes de peso de download em imagens pesadas.

1. O Controle de Escala: `background-size`

Por padrão, uma imagem de fundo é desenhada em suas dimensões intrínsecas originais (background-size: auto). Se a imagem tiver 2000px de largura e a caixa tiver 400px, apenas o canto superior esquerdo da foto será exibido. Para controlar a escala proporcional da imagem dentro do elemento, o CSS disponibiliza duas palavras-chave consagradas e valores numéricos:

Valor	Comportamento Proporcional	Corta a Imagem?	Deixa Espaços Vazios?	Cenário Ideal
`cover`	Preenche 100% da área da caixa, mantendo o aspect ratio.	Sim (recorta o excedente).	Nunca.	Banners de Hero Section, fundos de tela cheia.
`contain`	Redimensiona para caber 100% visível sem nenhum corte.	Nunca.	Sim (gera barras laterais vazias).	Logotipos, fotos de produtos em e-commerce.
`100% auto`	Ocupa 100% da largura da caixa e calcula a altura proporcional.	Depende da altura.	Possível no eixo Y.	Faixas horizontais com proporção controlada.
`largura altura`	Força dimensões exatas em pixels, rem ou porcentagem.	Não corta, mas pode distorcer.	Não.	Texturas geométricas com repetição milimétrica.

CSS
bg-size-examples.css

CSS3 15 linhas

/* O clássico banner Hero que preenche a tela inteira sem distorção */
.hero-banner {
    background-image: url('hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
 
/* O logotipo que precisa aparecer 100% inteiro dentro do card */
.card-logo {
    background-image: url('marca.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* O clássico banner Hero que preenche a tela inteira sem distorção */
.hero-banner {
    background-image: url('hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* O logotipo que precisa aparecer 100% inteiro dentro do card */
.card-logo {
    background-image: url('marca.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

2. Posicionamento Milimétrico: `background-position`

A propriedade background-position define as coordenadas de ancoragem da imagem dentro da caixa do elemento.

Palavras-Chave e Porcentagens

center: Centraliza a imagem perfeitamente nos eixos X e Y (equivalente a 50% 50%).
top left, bottom right: Ancoram nas extremidades da caixa.
center top: Mantém a imagem centralizada horizontalmente e alinhada ao topo (excelente para fotos verticais de pessoas em banners, evitando cortar a cabeça dos modelos!).

A Sintaxe Moderna de 4 Valores com Deslocamento (Edge Offsets)

O CSS permite posicionar a imagem com uma distância precisa a partir de qualquer borda específica:

CSS
edge-offset.css

CSS3 6 linhas

/* Posiciona o ícone a 2rem da borda direita e a 1.5rem da borda inferior */
.caixa-suporte {
    background-image: url('chat-icon.svg');
    background-repeat: no-repeat;
    background-position: right 2rem bottom 1.5rem;
}

/* Posiciona o ícone a 2rem da borda direita e a 1.5rem da borda inferior */
.caixa-suporte {
    background-image: url('chat-icon.svg');
    background-repeat: no-repeat;
    background-position: right 2rem bottom 1.5rem;
}

3. Gradientes Lineares: `linear-gradient()`

No CSS, gradientes são considerados imagens procedurais (do tipo de dado ) calculadas matematicamente pelo navegador. Por isso, são declarados na propriedade background-image (ou no shorthand background).

O linear-gradient() transita suavemente entre duas ou mais cores ao longo de uma linha reta imaginária.

CSS
linear-gradients.css

CSS3 24 linhas

/* 1. Direção por palavras-chave com 'to' (to right, to bottom, to top left) */
.gradiente-horizontal {
    background-image: linear-gradient(to right, #0284c7, #38bdf8);
}
 
/* 2. Direção angular precisa em graus (deg) */
.gradiente-diagonal {
    /* 135deg transita do canto superior esquerdo para o inferior direito */
    background-image: linear-gradient(135deg, #0f172a, #1e293b);
}
 
/* 3. Múltiplas paradas de cor com porcentagens (Color Stops) */
.gradiente-tricolor {
    background-image: linear-gradient(90deg, 
        #0284c7 0%, 
        #38bdf8 50%, 
        #818cf8 100%
    );
}
 
/* 4. Paradas Bruscas (Hard Stops): Cria divisões nítidas sem desfoque (duas metades) */
.fundo-dividido {
    background-image: linear-gradient(to right, #0284c7 50%, #0f172a 50%);
}

/* 1. Direção por palavras-chave com 'to' (to right, to bottom, to top left) */
.gradiente-horizontal {
    background-image: linear-gradient(to right, #0284c7, #38bdf8);
}

/* 2. Direção angular precisa em graus (deg) */
.gradiente-diagonal {
    /* 135deg transita do canto superior esquerdo para o inferior direito */
    background-image: linear-gradient(135deg, #0f172a, #1e293b);
}

/* 3. Múltiplas paradas de cor com porcentagens (Color Stops) */
.gradiente-tricolor {
    background-image: linear-gradient(90deg, 
        #0284c7 0%, 
        #38bdf8 50%, 
        #818cf8 100%
    );
}

/* 4. Paradas Bruscas (Hard Stops): Cria divisões nítidas sem desfoque (duas metades) */
.fundo-dividido {
    background-image: linear-gradient(to right, #0284c7 50%, #0f172a 50%);
}

4. Gradientes Radiais: `radial-gradient()`

O radial-gradient() irradia cores a partir de um ponto focal central em formato circular ou elíptico, imitando o comportamento óptico de holofotes e lâmpadas:

CSS
radial-gradients.css

CSS3 9 linhas

/* 1. Gradiente circular centralizado */
.efeito-spotlight {
    background-image: radial-gradient(circle, #38bdf8 0%, #0f172a 70%);
}
 
/* 2. Ponto de luz descentralizado (posicionado no topo direito) */
.brilho-topo-direito {
    background-image: radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.4), transparent 60%);
}

/* 1. Gradiente circular centralizado */
.efeito-spotlight {
    background-image: radial-gradient(circle, #38bdf8 0%, #0f172a 70%);
}

/* 2. Ponto de luz descentralizado (posicionado no topo direito) */
.brilho-topo-direito {
    background-image: radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.4), transparent 60%);
}

5. Gradientes Cônicos: `conic-gradient()`

O gradiente cônico é a função mais recente e versátil da especificação de imagens do CSS. Ele rotaciona as cores ao redor de um ponto central, como os ponteiros de um relógio ou um gráfico de setores circulares.

Com o conic-gradient(), podemos desenhar gráficos de pizza (Pie Charts) e indicadores de progresso circulares em HTML e CSS puros, sem bibliotecas pesadas de gráficos!

HTML & CSS
pie-chart.css

HTML5 1 linha

 class="grafico-pizza">

<div class="grafico-pizza"></div>

CSS3 10 linhas

/* Gráfico de Pizza 100% CSS representando 65% de conclusão */
.grafico-pizza {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-image: conic-gradient(
        #0284c7 0% 65%,     /* 65% azul primário */
        #334155 65% 100%    /* 35% cinza restante */
    );
}

/* Gráfico de Pizza 100% CSS representando 65% de conclusão */
.grafico-pizza {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-image: conic-gradient(
        #0284c7 0% 65%,     /* 65% azul primário */
        #334155 65% 100%    /* 35% cinza restante */
    );
}

6. O Shorthand Completo com a Barra Oblíqua (`/`)

Ao declarar a propriedade resumida background incluindo tamanho e posição, o CSS exige uma regra sintática obrigatória: a posição e o tamanho devem ser separados por uma barra inclinada (position / size):

CSS
shorthand-syntax.css

CSS3 4 linhas

/* Ordem oficial: [color] [image] [repeat] [attachment] [position] / [size] */
.banner-mestre {
    background: #0f172a url('hero.webp') no-repeat center / cover;
}

/* Ordem oficial: [color] [image] [repeat] [attachment] [position] / [size] */
.banner-mestre {
    background: #0f172a url('hero.webp') no-repeat center / cover;
}

⚠️

Sem a barra, a regra quebra! Se você escrever background: url('hero.webp') center cover; (sem a barra /), o navegador não conseguirá distinguir qual valor representa as coordenadas e qual representa a escala, descartando a propriedade inteira.

7. Laboratório Prático: Card Analítico com Efeito Spotlight e Gráfico Cônico

Neste laboratório de encerramento do Módulo 1, construiremos um card de métricas com acabamento profissional combinando gradientes radiais de iluminação, gráficos cônicos e bordas semitransparentes:

HTML
analytics-card.html

HTML5 23 linhas

 class="metric-card">
     class="metric-header">
         class="metric-badge">Módulo 1 Concluído
         class="metric-title">Taxa de Absorção do Curso


 
     class="metric-body">
        
         class="donut-chart">
             class="donut-center">
                 class="donut-number">84%
                 class="donut-label">Score


 
         class="metric-info">
             class="metric-desc">
                Você dominou seletores básicos, combinadores, herança, especificidade, organização BEM e o sistema de backgrounds do CSS.
            
             href="#modulo-2" class="btn-next-module">Avançar para Módulo 2 →

<div class="metric-card">
    <div class="metric-header">
        <span class="metric-badge">Módulo 1 Concluído</span>
        <h3 class="metric-title">Taxa de Absorção do Curso</h3>
    </div>

    <div class="metric-body">
        <!-- Gráfico circular de progresso puramente com conic-gradient -->
        <div class="donut-chart">
            <div class="donut-center">
                <span class="donut-number">84%</span>
                <span class="donut-label">Score</span>
            </div>
        </div>

        <div class="metric-info">
            <p class="metric-desc">
                Você dominou seletores básicos, combinadores, herança, especificidade, organização BEM e o sistema de backgrounds do CSS.
            </p>
            <a href="#modulo-2" class="btn-next-module">Avançar para Módulo 2 →</a>
        </div>
    </div>
</div>

CSS
analytics-card.css

CSS3 127 linhas

/* Reset e base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #020617;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
 
/* Card com Efeito Spotlight (Gradiente Radial + Cor Base Escura) */
.metric-card {
    background-color: #0b0f19;
    background-image: radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.15), transparent 70%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 2.25rem;
    max-width: 520px;
    width: 100%;
    color: #f8fafc;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
 
.metric-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 0.75rem;
}
 
.metric-title {
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 1.75rem;
}
 
.metric-body {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
 
/* Gráfico em Rosca (Donut) usando conic-gradient e aninhamento */
.donut-chart {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /* Gradiente cônico dividindo 84% de progresso ciano e 16% de fundo escuro */
    background-image: conic-gradient(
        #38bdf8 0% 84%,
        #1e293b 84% 100%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
 
/* Miolo que cria o furo da rosca (Donut) */
.donut-center {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #0b0f19;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
.donut-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
}
 
.donut-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
 
.metric-info {
    flex: 1;
    min-width: 200px;
}
 
.metric-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}
 
.btn-next-module {
    display: inline-block;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
 
.btn-next-module:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Reset e base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #020617;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

/* Card com Efeito Spotlight (Gradiente Radial + Cor Base Escura) */
.metric-card {
    background-color: #0b0f19;
    background-image: radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.15), transparent 70%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 2.25rem;
    max-width: 520px;
    width: 100%;
    color: #f8fafc;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

.metric-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 0.75rem;
}

.metric-title {
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 1.75rem;
}

.metric-body {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Gráfico em Rosca (Donut) usando conic-gradient e aninhamento */
.donut-chart {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /* Gradiente cônico dividindo 84% de progresso ciano e 16% de fundo escuro */
    background-image: conic-gradient(
        #38bdf8 0% 84%,
        #1e293b 84% 100%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}

/* Miolo que cria o furo da rosca (Donut) */
.donut-center {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #0b0f19;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.donut-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
}

.donut-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-info {
    flex: 1;
    min-width: 200px;
}

.metric-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

.btn-next-module {
    display: inline-block;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-next-module:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

⚡ Abrir no Playground IDE →

8. Boas Práticas, Acessibilidade & Performance com Gradientes

✅ Gradientes São Infinitamente Mais Rápidos que Imagens: Sempre que precisar de transições de cor ou sombras de fundo, use CSS Gradients. Eles têm 0 KB de download de rede, são desenhados diretamente na GPU e escalam perfeitamente para qualquer resolução de tela (Retina, 4K, 8K) sem granular ou pixelar.
✅ Teste o Contraste WCAG em Ambas as Pontas: Se o seu gradiente linear vai de um azul escuro (#0f172a) a um ciano claro (#38bdf8), um texto branco funcionará na ponta escura, mas ficará totalmente ilegível na ponta clara. Certifique-se de que a taxa de contraste (4.5:1) seja atendida em toda a extensão do gradiente sob o texto.
✅ Posicione com Intenção (Foco no Rosto): Em fotos verticais de pessoas como fundo de banners, configure background-position: center top;. Isso impede que cortes automáticos de tela no mobile decapitem a pessoa na foto.

9. 🎉 Conclusão do Módulo 1 & O Que Esperar no Módulo 2

Parabéns! Você concluiu com sucesso o Módulo 1: Fundamentos, Sintaxe & Seletores do Curso de CSS & CSS3 Completo!

Ao longo destas primeiras 10 aulas, construímos uma base sólida e inabalável: dominamos a anatomia das regras, as 3 formas de inserção, os seletores básicos e relacionais, a cascata com o cálculo de especificidade, o uso consciente de !important, a metodologia de arquitetura BEM, o sistema de cores HSL/OKLCH e o modelo avançado de backgrounds.

🏆

Prepare-se para o Módulo 2: O Box Model, Espaçamento & Tipografia:

Na Lição 11: O Box Model (Modelo de Caixa), entraremos no coração dimensional do CSS, dissecando Content, Padding, Border, Margin, colapso de margens e a indispensável propriedade box-sizing: border-box.

10. Ferramentas Relacionadas & Recursos

Valide e explore gradientes com as ferramentas integradas:

Playground Web IDE: Altere os ângulos e cores dos gradientes ao vivo no editor com preview instantâneo.
Limpador e Formatador CSS: Valide declarações complexas de gradientes e organize seu código com indentação limpa.

11. Referências Técnicas & Especificações Oficiais

W3C CSS Image Values and Replaced Content Module Level 3: Especificação oficial dos gradientes lineares e radiais.
W3C CSS Images Module Level 4: A especificação que oficializou os gradientes cônicos (conic-gradient).
MDN Web Docs (Mozilla): Guia definitivo e interativo sobre CSS Gradients.

O post Background Size, Position e Gradientes CSS | Web Academy apareceu primeiro em Web-Zoneware.

Arquivos radial-gradient css - Web-Zoneware