Resumindo
- Um gradiente preto é uma mistura entre tons de quase-preto, ou do preto para uma cor, usada para dar profundidade a designs escuros em vez de um vazio chapado.
- Os melhores gradientes pretos evitam o #000000 puro e usam pretos com tom, que carregam um pouco de matiz, como preto-azulado, espresso quente ou berinjela.
- Gradientes escuros têm banding com facilidade porque há poucos níveis de brilho entre valores quase pretos, então costumam precisar de grão ou de uma faixa maior.
- O texto corrido sobre um gradiente preto se lê melhor num off-white suave, e o texto cinza secundário ainda precisa de uma razão de contraste de pelo menos 4,5:1.
- Gradientes pretos combinam com lançamentos, luxo, música, vida noturna e produtos em modo escuro, onde o campo escuro faz uma cor de destaque brilhar.
Nesta página
Um gradiente preto é uma mistura que transita entre tons de quase-preto, ou do preto para uma cor, para que um design escuro tenha profundidade e luz em vez de um vazio chapado. Os que parecem caros quase nunca usam o #000000 puro. Eles partem de um preto com tom, como #0b0b10, deixam a luminosidade variar só alguns por cento e acrescentam uma única fonte de cor ou de luz em algum ponto do campo.
Este guia traz pretos com tom, códigos de gradiente preto para copiar, a correção para o banding que castiga as misturas escuras e regras para o texto. Para fundos mais escuros em geral, veja os fundos de gradiente escuros; para o básico de como as misturas funcionam, comece por o que é um gradiente.
Por que o preto puro parece chapado
O #000000 não tem matiz nem lugar mais escuro para ir, então um design construído sobre ele não tem sombras, só ausência. Nada na vida real é tão preto: um quarto escuro, um céu noturno e um tecido preto carregam um traço de cor e uma lenta mudança de brilho. O seu olho lê essa mudança como profundidade.
Há também uma razão prática. Em telas OLED, os pixels de preto puro desligam por completo e, em alguns celulares, levam um instante para voltar a ligar, o que pode deixar um rastro breve quando o conteúdo escuro rola. Subir o seu valor mais escuro alguns passos acima de zero evita isso e não custa nada visualmente.
Pretos com tom: as cores dentro de um bom preto
Um preto com tom é uma cor muito escura com um pouco de saturação sobrando. Em termos de HSL, mantenha a luminosidade entre cerca de 4% e 9% e deixe a saturação ficar entre 15% e 40%. O matiz decide o clima: pretos azulados parecem técnicos e frios, marrons quentes lembram couro e café, e a berinjela lembra o entardecer.
Se você trabalha em OKLCH, os números são mais fáceis de raciocinar: luminosidade em torno de 15% a 20% e croma entre 0,005 e 0,025. A Tinta acima é oklch(15.2% 0.011 285), um preto com um sopro de azul. O nosso guia de códigos de cor explica como ler esses valores.
Códigos de gradiente preto para copiar
Cada um destes mantém o valor mais escuro acima do preto puro e muda a luminosidade com delicadeza. Use como fundos inteiros, seções principais ou bases de slides, e escolha aquele cuja temperatura combina com a sua cor de destaque.
A direção importa mais no preto do que em qualquer outro lugar, porque há muito pouco mais acontecendo. A luz caindo de cima parece natural e calma. A luz subindo de um canto inferior parece um brilho, como uma tela ou uma chama, e atrai o olhar para esse canto. Para saber mais, veja os ângulos de gradiente.
Gradientes de preto para cor
Os gradientes pretos mais marcantes deixam uma cor emergir da escuridão. Duas regras os mantêm ricos. Primeiro, não dê à cor mais de um terço do campo, para que o preto continue sendo a nota principal. Segundo, escureça a cor rumo ao preto ao longo do próprio matiz, em vez de desbotar passando por cinza: um violeta deve passar por um índigo profundo no caminho para baixo, não por um carvão. Um meio cinza é a causa mais comum de gradientes sujos.
radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)Os navegadores modernos podem fazer parte disso por você. Interpolar em OKLCH mantém viva a croma da cor nas paradas mais escuras, e uma linha de reserva simples cobre os navegadores mais antigos.
.hero {
/* Fallback for browsers without colour interpolation */
background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
/* Blends through oklch, so the violet stays violet as it darkens */
background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}in oklch e é ignorada nos outros lugares.Como evitar o banding em gradientes escuros
As telas costumam mostrar 256 níveis por canal de cor. Um gradiente de #0a0a0a a #1a1a1a tem só 16 desses níveis para trabalhar, então, numa seção principal de 1920 pixels de largura, cada degrau tem cerca de 120 pixels, e você vê listras. Isso é o banding em gradientes, e os gradientes escuros sofrem mais com ele.
Causa banding
- Uma faixa de luminosidade longa e muito estreita, como de #0a0a0a a #1a1a1a
- Cinzas perfeitamente neutros, em que os três canais dão degrau no mesmo ponto
- Exportar um gradiente escuro como JPEG comprimido
- Esticar uma imagem pequena de gradiente numa tela grande
Resolve
- Uma camada leve de grão ou ruído sobre o gradiente
- Um leve matiz, para que os canais vermelho, verde e azul deem degrau em pontos diferentes
- Exportar em tamanho real como PNG, ou renderizar o gradiente ao vivo em CSS
- Uma faixa de luminosidade maior, ou uma distância menor para a mistura
O grão é a correção mais confiável, porque quebra a borda dura de cada degrau em textura que o olho volta a misturar. Uns poucos por cento de opacidade bastam. Os gradientes com grão tratam do visual em profundidade; este é o CSS mínimo.
.hero {
position: relative;
background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}Texto e cor sobre um gradiente preto
Bases pretas fazem quase qualquer texto claro passar no contraste, então o risco passa para o texto secundário. Cinzas médios que ficam bons num monitor brilhante podem cair abaixo do mínimo de 4,5:1 para o texto corrido. O branco puro também tem um custo: alguns leitores acham o branco brilhante sobre quase-preto áspero em trechos longos, então um off-white quente é mais gentil e ainda se lê com nitidez. Veja o contraste de cores para as regras completas.
| Cor do texto | Contraste sobre #0b0b10 | Use para |
|---|---|---|
#ffffff branco | 19,6:1 | Títulos curtos |
#f2efe9 off-white quente | 17,1:1 | Títulos e texto corrido |
#a1a1aa cinza-claro | 7,7:1 | Texto secundário |
#8a8a93 cinza-médio | 5,7:1 | Legendas e rótulos |
#6b6b75 cinza-apagado | 3,7:1 | Só texto grande, de 24 px para cima |
#4a4a52 carvão | 2,2:1 | Decoração, nunca palavras |
Um campo quase preto, uma linha em off-white quente e um único destaque: o layout clássico de gradiente preto.
Onde os gradientes pretos funcionam melhor
- Lançamentos e revelações, em que um campo escuro faz um produto ou um título parecer iluminado
- Luxo, perfumaria e joalheria, combinados com um destaque metálico como
#c9a96e - Música, vida noturna e eventos, com uma cor saturada subindo de um canto
- Produtos de tecnologia e para desenvolvedores, onde os pretos azulados parecem precisos
- Interfaces em modo escuro, usando dois ou três pretos com tom como camadas de superfície
- Portfólios de fotografia, onde uma moldura preta silenciosa deixa as imagens carregarem a cor
No Gradiently, o Mercado deixa você buscar Marks por palavras de cor como “quase preto” ou “preto e dourado”, e todo Mark já traz grão e luz, então os problemas de banding e de chapado descritos acima estão resolvidos antes de você começar.
Perguntas frequentes
Qual é o melhor código hex para um gradiente preto?
Parta de um quase-preto com tom, como #0b0b10 (preto azulado) ou #14100d (espresso quente), em vez de #000000, e deixe a parada mais clara alguns passos acima, como #1c1c24.
Por que o meu gradiente preto tem listras?
Valores quase pretos têm pouquíssimos níveis de brilho entre eles, então cada degrau vira uma faixa visível. Acrescente uma camada leve de grão, dê um leve matiz aos pretos ou amplie a faixa de luminosidade.
Que cor de texto fica melhor sobre um gradiente preto?
Um off-white quente como #f2efe9 se lê com nitidez e parece mais suave que o branco puro. Mantenha o texto cinza secundário com contraste de 4,5:1 ou mais.
Como faço um gradiente de preto para uma cor que não fique sujo?
Escureça a cor ao longo do próprio matiz a caminho do preto, por exemplo violeta passando por índigo profundo, em vez de desbotar passando por cinza. Interpolar em OKLCH no CSS ajuda.
Um gradiente preto é bom para o modo escuro?
É, se for sutil. As superfícies do modo escuro funcionam melhor como dois ou três pretos com tom a poucos por cento de distância, com qualquer gradiente visível restrito a grandes áreas de fundo.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
