BrowserTools
Publicidade
Início / Geradores / Gerador de Gradientes CSS

Gerador de Gradientes CSS

Cria gradientes CSS lineares, radiais e cónicos com uma pré-visualização em direto e código pronto a copiar.

Mantido por BrowserTools

A carregar Gerador de Gradientes CSS… Se nada acontecer, ativa o JavaScript.

Um gradiente CSS é uma função que gera uma transição suave entre duas ou mais cores, renderizada inteiramente pelo navegador sem qualquer ficheiro de imagem. Existem três tipos: `linear-gradient()` faz a transição das cores ao longo de um eixo reto em qualquer ângulo; `radial-gradient()` irradia para fora a partir de um ponto central num círculo ou numa elipse; e `conic-gradient()` varre as cores em torno de um ponto central como o mostrador de um relógio. Os três são independentes da resolução, renderizam nítidos em qualquer densidade de ecrã, desde os ecrãs HD padrão até aos ecrãs Retina de alta densidade, e como são calculados na GPU, têm um custo de desempenho praticamente nulo em comparação com os fundos de imagem.

Perguntas frequentes

É enviado algo para um servidor quando crio um gradiente?
Não. O gradiente é calculado e pré-visualizado inteiramente no teu navegador usando a renderização CSS. A ferramenta não contém backend, nem telemetria, nem pedidos de rede. As tuas escolhas de cor existem apenas no separador atual do navegador até copiares o CSS.
Qual é a diferença entre os gradientes lineares, radiais e cónicos?
Um gradiente linear faz a transição das cores ao longo de uma linha reta num ângulo especificado, 0deg é de baixo para cima, 90deg é da esquerda para a direita. Um gradiente radial irradia a partir de um ponto central para fora num círculo ou numa elipse. Um gradiente cónico varre as cores em torno de um ponto central por ângulo, como os segmentos de um gráfico circular ou o mostrador de uma roda de cor.
Os gradientes CSS funcionam em todos os navegadores?
Os gradientes lineares e radiais são suportados sem prefixos de fornecedor desde o Chrome 26, o Firefox 16, o Safari 7 e o Edge (todas as versões). Os gradientes cónicos chegaram mais tarde, Chrome 69, Safari 12.1 e Firefox 83, mas todas as versões atuais dos navegadores suportam os três tipos. Não são necessários prefixos de fornecedor para nenhum navegador moderno.
Como crio um gradiente com uma borda nítida em vez de uma mistura suave?
Coloca duas paragens de cor na mesma posição. Por exemplo, `linear-gradient(red 50%, blue 50%)` cria uma divisão nítida com o vermelho a preencher a metade superior e o azul a inferior exatamente. Podes combinar paragens nítidas e suaves no mesmo gradiente para criar efeitos de riscas ou faixas.
Posso usar gradientes como borda ou preenchimento de texto?
Não podes aplicar um gradiente diretamente à propriedade `border-color`, mas podes obter uma borda com gradiente usando a propriedade `border-image` com um valor de gradiente, ou usando uma técnica de pseudoelemento. Para texto com gradiente, aplica o gradiente como `background`, depois usa `background-clip: text` e `color: transparent`, uma técnica amplamente suportada nos navegadores modernos.
O que é uma paragem de cor e quantas posso acrescentar?
Uma paragem de cor define a cor numa posição específica dentro do gradiente, expressa como uma percentagem ou um comprimento. Os navegadores interpolam suavemente entre paragens adjacentes. Podes acrescentar tantas paragens quantas quiseres, o CSS não tem um máximo especificado, embora um número muito grande de paragens possa afetar o desempenho da renderização do gradiente em dispositivos de gama baixa.
Como controlo o ponto médio entre duas paragens de cor?
Os gradientes CSS suportam uma dica de cor (também chamada dica de ponto médio) entre duas paragens, escrita como uma percentagem solta: `linear-gradient(red, 30%, blue)` desloca o ponto médio da transição para a marca dos 30% em vez dos 50% por omissão. Isto dá um controlo mais fino sobre a rapidez com que as cores se misturam, útil para criar efeitos de luz de aspeto natural.
Posso sobrepor vários gradientes uns sobre os outros?
Sim. A propriedade `background` aceita vários valores separados por vírgulas, e cada um pode ser um gradiente. Empilham-se de cima para baixo, por isso `background: linear-gradient(...), radial-gradient(...)` desenha o gradiente linear sobre o radial. Podes combinar gradientes com URL de imagens da mesma forma, criando fundos compostos sem qualquer software de edição de imagem.
Qual era a forma antiga de fazer gradientes antes do CSS3?
Antes de os gradientes CSS serem padronizados, os designers web criavam efeitos de gradiente usando imagens recortadas, um GIF ou PNG com 1 píxel de altura esticado para preencher a largura do elemento. Esta abordagem exigia software de design, produzia pedidos HTTP adicionais, ficava desfocada em ecrãs de alta densidade e era penosa de atualizar quando as cores da marca mudavam. Os gradientes CSS, padronizados como parte do CSS Images Level 3, eliminaram todos esses inconvenientes.
Como faço um gradiente que funcione como indicador de carregamento?
Um gradiente cónico combinado com `animation: spin 1s linear infinite` e `border-radius: 50%` do CSS é a abordagem moderna de CSS puro para os indicadores de progresso. Define o gradiente desde a tua cor de destaque até transparente, começando em 0deg. A rotação cria a impressão de um arco em perseguição. Esta técnica substitui os GIF animados e evita o JavaScript para um padrão de interface comum.

Sobre Gerador de Gradientes CSS

Os gradientes CSS são usados por todo o lado no design web moderno. Os gradientes lineares subtis acrescentam profundidade às secções principais, aos estados de botão e aos fundos de cartões sem a sobrecarga dos recursos de imagem. Os gradientes radiais criam efeitos de holofote, vinhetas e um brilho ambiente em torno dos elementos centrais. Os gradientes cónicos sustentam gráficos circulares, indicadores de carregamento e rodas de cor construídos puramente em CSS. Para além da estética, os gradientes em CSS são versionados no código-fonte ao lado da marcação que estilizam, o que os torna mais fáceis de manter, atualizar e transferir do que os ficheiros de imagem gerados em software de design.

Esta ferramenta oferece um editor visual em direto para os três tipos de gradiente. Adicionas, removes e reposicionas paragens de cor numa faixa interativa, ajustas o ângulo ou a forma, e a saída CSS atualiza-se em tempo real. O excerto gerado é CSS3 padrão e sem prefixos de fornecedor que funciona em todos os navegadores modernos. É executado inteiramente do lado do cliente, sem carregamentos, sem contas, sem rastreio. As alterações existem apenas na tua sessão de navegador e no CSS final que copias para a área de transferência.

Uma consideração importante é a acessibilidade: os gradientes são fundos decorativos e não transportam alternativas de texto, mas afetam a relação de contraste de qualquer texto renderizado por cima deles. Um gradiente que começa claro e termina escuro pode tornar o texto legível num lado do elemento e ilegível no outro. Testa sempre os teus fundos de gradiente em relação ao texto de primeiro plano usando um verificador de contraste. Uma técnica prática é acrescentar uma sobreposição escura semitransparente através de uma camada CSS adicional, `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))`, para garantir um contraste mínimo consistente em toda a área do gradiente.

Das berrantes barras arco-íris dos anos 90 ao CSS acelerado por GPU: a cronologia do gradiente web

Os designers web obtiveram os primeiros gradientes no final dos anos 90 através de recortes de imagens GIF e PNG, um mosaico de imagem com um píxel de largura esticado horizontalmente, ou um fundo de imagem de largura total. A técnica era tão comum que moldou toda uma estética: a barra de navegação com gradiente azul-escuro para preto tornou-se sinónimo do design web corporativo do início dos anos 2000. Criar ou ajustar estes gradientes exigia o Photoshop, uma nova exportação e uma implementação no servidor, um fluxo de trabalho que podia levar horas para uma mudança de cor que talvez fosse rejeitada na revisão.

A sintaxe de gradiente CSS com prefixos de fornecedor começou a aparecer por volta de 2008: `-webkit-gradient()` no Safari, com a sua própria sintaxe peculiar que pouco se assemelhava ao que viria a tornar-se o padrão. O Firefox introduziu `-moz-linear-gradient()` com uma sintaxe diferente. O Internet Explorer não ofereceu qualquer suporte de gradiente até ao IE10, levando os programadores a usar em vez disso a sintaxe proprietária `filter: progid:DXImageTransform.Microsoft.gradient()`. Durante vários anos, obter gradientes consistentes entre navegadores exigia escrever quatro declarações separadas para o mesmo efeito, um pesadelo de manutenção que tornou enormemente populares os pré-processadores CSS e as ferramentas de geração de gradientes.

O W3C padronizou os gradientes CSS na especificação CSS Images Level 3, e os gradientes lineares e radiais ganharam suporte universal sem prefixos por volta de 2013. Os gradientes cónicos, propostos por Lea Verou numa publicação de blogue em 2015, foram implementados nos navegadores entre 2018 e 2020 depois de ela ter lançado um polyfill que demonstrava os casos de uso. A progressão dos rudimentares mosaicos de imagem para as primitivas CSS nativas renderizadas por GPU acompanha a história mais ampla do amadurecimento da plataforma web, de um sistema de documentos para um ambiente de execução de aplicações completo.

Ferramentas relacionadas

Conversor de cor e verificador de contraste

Converte cores entre HEX, RGB, HSL e HSV, além de verificar o rácio de contraste WCAG.

Gerador de paletas de cores

Gera paletas complementares, análogas, triádicas, tetrádicas, monocromáticas e de sombras/tons claros a partir de qualquer cor base.
Publicidade
Publicidade
Publicidade