# Fundos com gradiente escuro: profundidade sem tristeza [Canonical HTML page](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) Os gradientes escuros podem parecer uma cena noturna de luxo ou um ecrã turvo com o brilho baixado. A diferença está em poucas decisões, todas fáceis de copiar. ## The short version - Um bom fundo com gradiente escuro parte de um quase preto com tom, em vez de preto puro, e junta-lhe uma cor iluminada que sobe a partir dele. - Os gradientes escuros parecem tristes quando não têm fonte de luz, nem cor nos pretos, nem contraste entre as zonas escuras e as iluminadas. - Os gradientes escuros criam mais faixas do que qualquer outro tipo, por isso quase sempre precisam de grão fino e de uma exportação cuidada. - O texto claro num gradiente escuro deve ficar na zona mais escura e cumprir um contraste de pelo menos 4,5:1 no texto corrido. - Tipografia em branco-sujo e pretos ligeiramente levantados cansam menos a vista do que branco puro sobre preto puro. Um bom **fundo com gradiente escuro** é um quase preto com tom e uma cor a brilhar a partir dele, como se houvesse uma única luz acesa num quarto às escuras. O tom dá profundidade aos pretos, a cor iluminada dá ao olhar um sítio para onde ir e a grande área escura faz o texto branco parecer nítido. Sem estas três coisas, um gradiente escuro parece apenas um ecrã fraco. ## Começa com um quase preto com tom O preto puro `#000000` é um beco sem saída: não há de onde misturar, e qualquer cor ao lado parece colada. Um quase preto com um toque de matiz dá ao gradiente uma família a que pertencer. Os pretos azulados parecem frios e técnicos, os pretos violeta parecem luxuosos, os pretos esverdeados parecem naturais e os castanhos quentes fazem lembrar couro e madeira. Escolhe o tom que combina com a cor que vais iluminar. - Preto azulado: #0b0f1a - Preto violeta: #120b1a - Preto esverdeado: #0a1411 - Preto sombra: #160c0a - Preto neutro: #0f0f10 Cinco quase pretos. Lado a lado, os tons notam-se; sozinhos, lêem-se como preto com um ambiente. ## Junta uma cor iluminada A cor iluminada é o que transforma a escuridão em atmosfera. Coloca-a fora do centro, normalmente perto de uma margem ou de um canto, para que pareça uma fonte de luz. Mantém-na na mesma família do tom: luz violeta sobre preto violeta, verde-azulado sobre preto azulado. Uma só cor quase sempre chega. Duas podem funcionar se forem vizinhas. Mais do que isso começa a parecer uma discoteca, o que é ótimo se estás a desenhar para uma; vê os [gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients). - Candeeiro 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%)` - 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%)` - Fumo 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. ## Porque alguns gradientes escuros parecem tristes ### Tristes - Preto puro a misturar-se com cinzento escuro - Luz espalhada por igual, sem fonte - A cor iluminada esbatida até ao cinzento - Riscas visíveis ao longo da rampa escura - Texto cinzento sobre um fundo cinzento-preto ### Ricos - Um quase preto com um matiz claro - Uma luz, fora do centro, a desvanecer - A cor iluminada saturada no ponto mais brilhante - Grão fino sobre toda a superfície - Texto em branco-sujo na zona mais escura O erro mais comum é misturar a cor iluminada em direção ao cinzento a caminho do preto. Mantém a croma alta à medida que escurece: o violeta deve tornar-se violeta mais profundo, depois preto violeta, nunca cinzento. Misturar em OKLCH ajuda; os [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam porquê. ## Faixas: o maior risco do gradiente escuro Os gradientes escuros ocupam só uma pequena gama de valores, muitas vezes uma dúzia ou duas por canal, e as pessoas são muito sensíveis a pequenos degraus entre tons escuros. Por isso uma rampa escura suave por um ecrã inteiro é a receita perfeita para riscas visíveis. Três hábitos evitam-no: dar à rampa gama suficiente, juntar grão fino e exportar sem compressão forte. O pormenor está em [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) e [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients). > **Confirma no telemóvel** As faixas invisíveis num monitor calibrado podem ser evidentes num telemóvel com o brilho no máximo, depois de uma rede social recomprimir a imagem. Verifica sempre a versão carregada. ## Texto sobre um gradiente escuro Os fundos escuros são generosos com a tipografia, mas só nas zonas escuras. Mantém as palavras longe da cor iluminada, onde o contraste desce. Usa branco-sujo em vez de branco puro em passagens longas, porque o branco puro sobre quase preto pode encadear. E mede: a WCAG pede pelo menos 4,5:1 para texto corrido e 3:1 para texto grande, o que podes verificar com o [verificador de contraste da WebAIM](https://webaim.org/resources/contrastchecker/). | Cor do texto | Sobre `#0b0f1a` | Usa para | | --- | --- | --- | | `#ffffff` branco | Cerca de 19:1 | Títulos e etiquetas curtas | | `#e5e7eb` branco-sujo | Cerca de 15:1, mais suave | Texto corrido e leitura longa | | `#9ca3af` cinzento médio | Cerca de 7,5:1, passa no AA | Legendas e texto secundário | | `#4b5563` cinzento escuro | Cerca de 2,5:1, falha | Evita em tudo o que as pessoas precisem de ler | Cores de texto sobre um fundo preto azulado. Verifica sempre o contraste no ponto mais claro por trás das palavras, não no mais escuro. Uma capa quadrada com o título Fora de horas em que um brilho intenso fica por trás das palavras A luz passa mesmo por trás do título e achata-o. A mesma capa quadrada com a parte mais escura do gradiente por trás do título Com o fundo escuro por trás do título, a luz enquadra-o em vez de o achatar. ## Onde os fundos com gradiente escuro funcionam melhor Os gradientes escuros servem tudo o que acontece à noite, tem ar premium ou precisa que a cor brilhe: música e eventos, cinema e jogos, lançamentos de tecnologia, perfumaria e bebidas espirituosas, e portefólios em que o trabalho deve ser a coisa mais brilhante da página. Ajudam também na fotografia de produto, porque um objeto iluminado sobre fundo escuro parece precioso. - **Capas e cartazes:** um fundo escuro faz de um único título brilhante o protagonista - **Stories e Reels:** os ecrãs cheios escuros têm ar de cinema no telemóvel - **Diapositivos:** texto claro sobre escuro é mais calmo numa sala com pouca luz do que texto escuro sobre branco - **Cabeçalhos de sites:** um cabeçalho escuro faz o primeiro ecrã parecer deliberado; vê os [fundos para cabeçalhos de sites](https://gradiently.design/pt-pt/guide/website-hero-background) Servem menos onde as pessoas leem muito tempo em papel, ou onde uma marca se constrói sobre a luz do dia, o frescor ou o jogo. Aí, um fundo claro com uma cor suave faz o mesmo trabalho. ## Um fundo com 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 em branco-sujo e títulos em branco. Acrescenta uma camada de grão para acabar. Se estás a desenhar uma interface inteira em modo escuro e não um só fundo, vê o [design em modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design). Muitos Marks do Mercado assentam em fundos escuros e abrem espaço para as tuas palavras automaticamente, movendo a sua zona mais calma para trás do texto. ## FAQ ### Como faço um fundo com gradiente escuro ficar bonito? Usa um quase preto com tom em vez de preto puro, junta uma cor iluminada fora do centro da mesma família e termina com um grão fino. ### Porque é que o meu gradiente escuro tem riscas? As misturas escuras ocupam muito poucos valores de cor, por isso os degraus são largos e fáceis de ver. Junta grão, alarga a gama e exporta com alta qualidade. ### Que cor de texto funciona num gradiente escuro? Branco para títulos e branco-sujo, como `#e5e7eb`, para texto corrido, colocado na zona mais escura. Verifica um contraste de pelo menos 4,5:1 no texto corrido. ### Devo usar preto puro num gradiente? Raramente. Um quase preto com um leve matiz mistura-se de forma mais natural e dá profundidade ao gradiente. ### Que cores combinam com um gradiente preto? Violeta profundo, verde-azulado, azul, laranja brasa e rosa funcionam todos como cor iluminada única sobre um fundo quase preto da mesma família de matiz.