Crie gradientes CSS lineares, radiais ou cónicos com pré-visualização ao vivo. Ajuste cores e direção, depois copie o CSS.
Escolhe um tipo de gradiente (linear, radial ou cónico), adiciona paragens de cor, ajusta as suas posições e vê o resultado em tempo real. A propriedade CSS background gerada está pronta para copiar e colar diretamente no teu projeto.
Seleciona um tipo de gradiente, ajusta o ângulo (para linear/cónico), clica nas amostras de cor para as alterar e arrasta os controlos para definir as posições. Clica em + Adicionar cor para mais paragens. Copia o CSS do bloco escuro à direita.
Os gradientes ganham valor quando ajudam a criar atmosfera, profundidade ou ênfase sem acrescentar um asset de imagem completo. A utilidade prática de um gerador está na velocidade: pode comparar direção, posições de paragem e tipo de gradiente depressa o suficiente para tomar decisões de design enquanto a ideia ainda está fresca.
Esta ferramenta mantém essa exploração no plano visual e produz CSS que pode reutilizar quando o resultado estiver certo.
Os gradientes podem acrescentar profundidade e movimento sem o peso de uma imagem, mas as superfícies grandes também tornam muito visíveis paragens mal colocadas e transições turvas.
Botões, banners e painéis destacados podem beneficiar de gradientes subtis, mas também podem parecer datados rapidamente se a transição for demasiado agressiva.
Usar cores de marca aprovadas num gradiente parece simples até a mistura entre elas deixar de parecer a marca no momento em que se encontram a meio.
A maioria dos gradientes melhora quando começa de forma simples. Mais paragens não significam automaticamente mais refinamento.
Ângulos e percentagens de paragem são difíceis de avaliar em abstrato. É a pré-visualização ao vivo que os transforma numa decisão de design.
Um gradiente pode parecer bom por si só e, ainda assim, funcionar mal quando texto, ícones ou cartões ficam por cima.
É aqui que os gradientes muitas vezes justificam a sua existência: dão atmosfera a uma página sem exigir um asset pesado de imagem.
Se vários componentes devem partilhar a mesma linguagem visual, copiar um valor CSS exato é mais limpo do que aproximá-lo à mão em vários locais.
Estes tipos podem ser visualmente eficazes, mas também é fácil exagerar. Um gerador ajuda-o a perceber isso rapidamente.
Esta ferramenta gera CSS de gradientes. Não decide cores de primeiro plano acessíveis, não constrói um sistema de cor completo e não lhe diz se o efeito encaixa no seu layout. Dá-lhe um valor de gradiente utilizável, não o julgamento de design completo.
Os gradientes são fáceis de adicionar e surpreendentemente fáceis de estragar. O valor de um gerador não está só na velocidade, mas em reduzir iterações de design desperdiçadas com ajustes de sintaxe evitáveis.
Um gradiente cónico roda cores em torno de um ponto central. É útil para gráficos circulares, rodas de cores, efeitos de mostrador e qualquer design onde as cores transitam em varrimento.
Quantas queiras — clica em + Adicionar cor para inserir paragens adicionais. O CSS é válido independentemente de quantas paragens usas.
Esta ferramenta funciona inteiramente no seu navegador. Nada do que escreve ou cola é enviado para qualquer servidor — todo o processamento ocorre localmente no seu dispositivo.