# Fundos de gradiente escuros: profundidade sem tristeza [Canonical HTML page](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) Gradientes escuros podem parecer uma cena noturna premium ou uma tela turva com o brilho baixo. A diferença está em poucas decisões, todas fáceis de copiar. ## The short version - Um fundo de gradiente escuro rico parte de um quase-preto com tom em vez de preto puro e depois acrescenta uma cor iluminada que sobe dele. - Gradientes escuros ficam sombrios quando não têm fonte de luz, cor nos pretos nem contraste entre as áreas escuras e as iluminadas. - Gradientes escuros têm mais banding que qualquer outro tipo, então quase sempre precisam de um grão fino e de uma exportação cuidadosa. - O texto claro sobre um gradiente escuro deve ficar na área mais escura e atingir contraste de pelo menos 4,5:1 no texto corrido. - Texto off-white e pretos um pouco mais claros cansam menos os olhos do que branco puro sobre preto puro. Um bom **fundo de gradiente escuro** é um quase-preto com tom e uma cor brilhando nele, como se uma única luz estivesse acesa num quarto escuro. O tom dá profundidade aos pretos, a cor iluminada dá ao olhar para onde ir, e a grande área escura faz o texto branco parecer nítido. Sem essas três coisas, um gradiente escuro parece só uma tela sem brilho. ## Comece com um quase-preto com tom O preto puro `#000000` é um beco sem saída: não há de onde partir a mistura e qualquer cor ao lado dele parece colada. Um quase-preto com um traço de matiz dá ao gradiente uma família a que pertencer. Pretos azulados parecem frios e técnicos, pretos violeta parecem luxuosos, pretos esverdeados parecem naturais e marrons quentes lembram couro e madeira. Escolha o tom que combina com a cor que você pretende iluminar. - Preto-azulado: #0b0f1a - Preto-violeta: #120b1a - Preto-esverdeado: #0a1411 - Preto-sombra: #160c0a - Preto neutro: #0f0f10 Cinco quase-pretos. Lado a lado os tons são óbvios; sozinhos, parecem preto com um clima. ## Acrescente uma cor iluminada A cor iluminada é o que transforma a escuridão em atmosfera. Coloque-a fora do centro, em geral perto de uma borda ou de um canto, para que pareça uma fonte de luz. Mantenha-a na mesma família do tom: luz violeta sobre preto-violeta, verde-azulado sobre preto-azulado. Uma cor quase sempre basta. Duas podem funcionar se forem vizinhas. Mais que isso começa a parecer uma boate, o que é ótimo se você estiver criando para uma; veja os [gradientes neon](https://gradiently.design/pt-br/guide/neon-gradients). - Abajur violeta: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)` - Horizonte verde-azulado: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)` - Brilho de brasa: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)` - Hora azul: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)` - Fumaça rosa: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)` - Noite de musgo: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)` Seis gradientes escuros, cada um um quase-preto com tom e uma cor iluminada. A maior parte de cada amostra continua escura. ## Por que alguns gradientes escuros parecem sombrios ### Sombrio - Preto puro se misturando com cinza-escuro - Luz espalhada por igual, sem fonte - A cor iluminada apagada rumo ao cinza - Listras visíveis ao longo da rampa escura - Texto cinza sobre um fundo preto-acinzentado ### Rico - Um quase-preto com tom e matiz claro - Uma luz, fora do centro, se dissolvendo - A cor iluminada mantida saturada no ponto mais brilhante - Grão fino sobre a superfície inteira - Texto off-white na área mais escura O erro mais comum é misturar a cor iluminada rumo ao cinza no caminho para o preto. Mantenha a croma alta ao escurecer: o violeta deve virar um violeta mais profundo, depois preto-violeta, nunca cinza. Misturar em OKLCH ajuda; os [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients) explicam o porquê. ## Banding: o maior risco do gradiente escuro Gradientes escuros cobrem só uma pequena faixa de valores, muitas vezes uma ou duas dúzias por canal, e as pessoas são muito sensíveis a pequenos degraus entre tons escuros. Por isso, uma rampa escura lisa numa tela inteira é a receita perfeita para listras visíveis. Três hábitos evitam isso: dar à rampa faixa suficiente, acrescentar grão fino e exportar sem compressão pesada. Os detalhes estão em [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) e [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients). > **Confira no celular** O banding invisível num monitor calibrado pode ser óbvio num celular com brilho máximo, depois que uma plataforma social recomprimiu a imagem. Confira sempre a versão publicada. ## Texto sobre um gradiente escuro Fundos escuros são generosos com o texto, mas só nas áreas escuras. Mantenha as palavras longe da cor iluminada, onde o contraste cai. Use off-white em vez de branco puro em trechos longos, porque o branco puro sobre quase-preto pode ofuscar. E meça: a WCAG pede pelo menos 4,5:1 para o texto corrido e 3:1 para o texto grande, o que você confere no [verificador de contraste da WebAIM](https://webaim.org/resources/contrastchecker/). | Cor do texto | Sobre `#0b0f1a` | Use para | | --- | --- | --- | | `#ffffff` branco | Cerca de 19:1 | Títulos e rótulos curtos | | `#e5e7eb` off-white | Cerca de 15:1, mais suave | Texto corrido e leitura longa | | `#9ca3af` cinza-médio | Cerca de 7,5:1, passa no AA | Legendas e texto secundário | | `#4b5563` cinza-escuro | Cerca de 2,5:1, reprova | Evite em tudo que as pessoas precisem ler | Cores de texto sobre um fundo preto-azulado. Confira sempre o contraste no ponto mais claro atrás das palavras, não no mais escuro. Uma capa quadrada intitulada Fora do expediente, com um brilho forte atrás das palavras A luz passa direto atrás do título e o achata. A mesma capa quadrada com a parte mais escura do gradiente atrás do título Com a parte escura do fundo atrás do título, a luz o emoldura em vez de achatá-lo. ## Onde os fundos de gradiente escuros funcionam melhor Gradientes escuros combinam com tudo que acontece à noite, parece premium ou precisa que a cor brilhe: música e eventos, cinema e games, lançamentos de tecnologia, perfumes e destilados, e portfólios em que o trabalho deve ser a coisa mais brilhante da página. Também ajudam na fotografia de produto, porque um objeto iluminado sobre fundo escuro parece precioso. - **Capas e pôsteres:** um fundo escuro faz um único título brilhante virar o protagonista - **Stories e Reels:** quadros escuros em tela cheia parecem cinematográficos no celular - **Slides:** texto claro sobre escuro é mais calmo numa sala de luz baixa do que texto escuro sobre branco - **Heróis de site:** um herói escuro faz a primeira tela parecer intencional; veja os [fundos de herói para sites](https://gradiently.design/pt-br/guide/website-hero-background) Combinam menos onde as pessoas leem por muito tempo no papel ou onde a marca se baseia em luz do dia, frescor ou brincadeira. Nesses casos, um fundo claro com uma cor suave faz o mesmo trabalho. ## Um fundo de gradiente escuro em CSS ```css .dark-hero { background-color: #0b0f1a; /* fallback */ background-image: radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%), linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%); color: #e5e7eb; } .dark-hero h1 { color: #ffffff; } ``` Um fundo preto-azulado com uma luz azul no canto superior direito, texto corrido off-white e títulos brancos. Acrescente uma camada de grão para finalizar. Se você está criando uma interface inteira em modo escuro e não um só fundo, veja o [design em modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design). Muitos Marks do Mercado são feitos sobre fundos escuros e abrem espaço para as suas palavras sozinhos, movendo a área mais calma para trás do texto. ## FAQ ### Como fazer um fundo de gradiente escuro ficar bonito? Use um quase-preto com tom em vez de preto puro, acrescente uma cor iluminada fora do centro da mesma família e finalize com grão fino. ### Por que o meu gradiente escuro tem listras? Misturas escuras cobrem poucos valores de cor, então os degraus são largos e fáceis de ver. Acrescente grão, amplie a faixa e exporte em alta qualidade. ### Que cor de texto funciona sobre um gradiente escuro? Branco para títulos e um off-white como `#e5e7eb` para o texto corrido, na área mais escura. Confira contraste de pelo menos 4,5:1 no texto corrido. ### Devo usar preto puro num gradiente? Raramente. Um quase-preto com um leve matiz se mistura de modo mais natural e dá profundidade ao gradiente. ### Que cores combinam com um gradiente preto? Violeta profundo, verde-azulado, azul, laranja-brasa e rosa funcionam como cor iluminada sobre um quase-preto da mesma família de matiz.