Gradientes

Gradientes

O que é um gradiente? Um guia simples sobre transições de cor

6 min de leitura

O gradiente é a ideia mais simples da cor e uma das mais fáceis de errar. Veja o que ele é, como é construído e por que voltou a aparecer em todas as telas.

Gradientes

Linear, radial, cônico e mesh: todos os tipos de gradiente explicados

6 min de leitura

Todo gradiente leva a cor por um caminho. Mude o caminho e você muda a sensação. Veja cada tipo, como ele é, o código dele e o trabalho que faz melhor.

Gradientes

Gradientes de malha: o que são e como criar um

6 min de leitura

Os gradientes de malha são os campos de cor suaves e à deriva por trás de metade das páginas de lançamento que você viu neste ano. Veja como funcionam, como montar um à mão e os dois erros que estragam a maioria.

Gradientes

Como fazer um fundo de gradiente que não pareça genérico

5 min de leitura

A maioria dos fundos de gradiente é parecida porque parte das mesmas poucas predefinições. Aqui está um método de cinco passos para fazer um fundo bem pensado, com códigos para copiar.

Gradientes

Gradientes com grão: por que um pouco de ruído deixa a cor mais cara

6 min de leitura

Um gradiente limpo parece um padrão de tela. O mesmo gradiente com uma camada fina de grão parece uma impressão, um fotograma de filme ou uma parede pintada. Veja por quê, quanto usar e como fazer.

Gradientes

Gradientes aurora: luz suave, bem feita

5 min de leitura

Gradientes aurora tomam emprestado o visual da aurora boreal: véus luminosos de cor à deriva sobre a escuridão. São lindos, e escorregam rápido para o território do protetor de tela. Veja como mantê-los do lado certo.

Gradientes

Por que o seu gradiente tem listras e como corrigir o banding

6 min de leitura

Você fez um gradiente liso e ele voltou listrado. Isso é banding, e ele tem uma causa simples e um punhado de correções confiáveis. Aqui está a aritmética e depois as curas.

Gradientes

Por que alguns gradientes ficam cinza no meio e como evitar

5 min de leitura

Azul e amarelo deveriam formar um gradiente lindo. Misture do jeito padrão e você ganha uma mancha cinza no meio. Veja exatamente por quê e quatro formas de manter toda mistura limpa.

Gradientes

60 combinações de cores para gradiente que funcionam, com códigos

5 min de leitura

Sessenta gradientes, organizados pela sensação que você quer e não pelo matiz. Cada um é um código CSS vivo para copiar, e cada grupo explica a regra que faz suas misturas funcionarem.

Gradientes

Gradientes de duas cores: 30 pares que sempre funcionam

5 min de leitura

Duas cores, uma direção, nada para dar errado. Quase nada. Veja as duas regras que decidem se um par funciona e trinta pares que passam nas duas, prontos para copiar.

Gradientes

Fundos de gradiente escuros: profundidade sem tristeza

5 min de leitura

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.

Gradientes

Gradientes pastel com frescor, sem ficar enjoativos

5 min de leitura

Os pastéis são os gradientes mais fáceis de gostar e os mais fáceis de exagerar. Algumas regras fazem com que pareçam luz de primavera no papel, e não um bolo de aniversário.

Gradientes

Gradientes neon: brilho sem cansar a vista

5 min de leitura

O neon é a cor no volume máximo. Sobre um fundo escuro, ele brilha; espalhado pela tela inteira, ele zumbe. Veja como manter o brilho e perder o zumbido.

Gradientes

Gradientes holográficos e iridescência, explicados

5 min de leitura

O holográfico, as bolhas de sabão e a madrepérola mudam de cor quando você se mexe. Uma tela plana não consegue fazer isso, mas um gradiente bem construído convence o olho de que consegue.

Gradientes

Efeito duotone: qualquer foto da sua marca em duas cores

5 min de leitura

O duotone transforma qualquer foto em duas cores à sua escolha: uma para as sombras, outra para a luz. É o jeito mais rápido de fazer imagens sem relação parecerem de uma só marca.

Gradientes

Gradiente ou cor chapada? Quando cada um vence

6 min de leitura

A cor chapada é clara, barata e exata. Os gradientes são vivos, distintivos e mais difíceis de controlar. A maioria das boas marcas usa os dois. Veja como decidir de qual cada superfície precisa.

Gradientes

Textura em gradiente: grão, papel, vidro e seda explicados

5 min de leitura

Dois gradientes com cores idênticas podem parecer um fotograma de filme, um cartão de tipografia, uma tela de celular ou um vestido de noite. A diferença é a textura, e ela diz mais que as cores.

Gradientes

Glassmorphism e gradientes: um guia prático

6 min de leitura

O vidro fosco sobre um gradiente luminoso é um dos efeitos mais atraentes do design de interfaces e um dos mais fáceis de tornar ilegível. Veja como ter a beleza sem perder as palavras.

Gradientes

Mapa de gradiente: recolorir qualquer imagem em segundos

5 min de leitura

Um mapa de gradiente pega qualquer imagem, foto, textura ou ilustração e a repinta nas cores que você escolher, mantendo toda a luz e a sombra. É a ferramenta de recolorir mais rápida que existe.

Gradientes

Ângulo e direção do gradiente: para que lado ele deve ir

6 min de leitura

As mesmas duas cores podem parecer calmas, animadoras ou inquietas só conforme o lado para onde correm. Veja como escolher uma direção de propósito e como acertar o ângulo no código.

Gradientes

Nove erros de gradiente que fazem o design parecer barato

6 min de leitura

A maioria dos gradientes com cara de barato falha de uma entre nove maneiras previsíveis. Aqui está cada erro, o que o causa e a mudança específica que o corrige.

Gradientes

Gradiente radial: o holofote que guia o olhar

5 min de leitura

Um gradiente radial é o mais perto que o design chega de apontar uma luz para algo. Veja como mirar, dimensionar e evitar que ele pareça um alvo.

Gradientes

Gradientes cônicos: círculos de cores, gráficos e brilho

5 min de leitura

Gradientes lineares percorrem, gradientes radiais se espalham e gradientes cônicos giram. Essa única diferença os torna a ferramenta certa para círculos de cores, gráficos, metal e feixes de luz.

Gradientes

Como imprimir gradientes sem faixas nem cores barrentas

7 min de leitura

Um gradiente que brilha na tela pode voltar da gráfica chapado, listrado ou marrom. Quase todas essas falhas são previsíveis, e a maioria tem conserto antes de o arquivo sair da sua mesa.