Paradas de cor flexíveis e predefinições multicoloridas
Extraia gradientes de cores de imagens
Código instantâneo para várias plataformas e exportação de amostras em alta definição
Recursos explicados
Faixa interativa com várias paradas
Arraste e posicione visualmente as paradas de cor em uma escala de 0% a 100%.
Extração de gradiente de imagens
Use a opção de extração de cores de imagens para transformar fotos em paletas de gradientes CSS.
Visualização ao vivo de componentes de interface
Confira seus gradientes em tempo real em cartões, botões interativos e tipografia com gradiente.
Sincronização com o fragmento da URL
Cada ajuste atualiza o fragmento da URL para que você possa compartilhar com a equipe a configuração exata do gradiente.
Downloads em vários formatos
Baixe imagens HD em 1080p (PNG, JPG, WEBP), fichas técnicas em PDF prontas para impressão ou trechos de código.
Para que você pode usar esta ferramenta?
Fundos para aplicações web
Crie fundos responsivos com gradientes lineares e radiais para seções principais e cartões de interface.
Desenvolvimento de aplicativos móveis
Exporte código de gradiente pronto para colar em layouts Flutter, SwiftUI ou Android com Kotlin e Compose.
Redes sociais e design gráfico
Exporte papéis de parede em gradiente HD de 1920 × 1080 para usar como fundo de banners gráficos ou capas de vídeo.
Informações da ferramenta
| Tipo de ferramenta | Gerador de gradientes CSS e para várias plataformas |
|---|---|
| Modos de gradiente | Linear, radial e cônico |
| Ajuste de ângulo | Rotação de 0° a 360° |
| Paradas de cor | De 2 a um número ilimitado de paradas personalizadas |
| Formatos de exportação | CSS, Tailwind, Flutter, SwiftUI, Kotlin, SVG, JSON, PNG, JPG, WEBP e PDF |
| Processamento | 100% no navegador (client-side) |
Benefícios
- Não é necessário cadastro nem conta.
- Copie e cole CSS instantaneamente, com compatibilidade garantida com navegadores.
- Evite misturas de cores intermediárias sem vida.
- Compartilhe fragmentos de URL para colaborar com a equipe no fluxo de trabalho de design.
Limitações
- Gradientes cônicos podem ser exibidos de forma diferente em navegadores antigos.
- A extração de cores de imagens muito escuras pode selecionar sombras se a foto estiver subexposta.
Privacidade dos dados no navegador
Todos os cálculos de cores, a renderização do canvas e a geração de trechos de código acontecem localmente no navegador. Nenhum dado de imagem ou configuração de cores é enviado a servidores externos.
Espaço de trabalho 100% privado
Como o processamento é feito inteiramente no dispositivo do usuário, seus recursos de design e as cores da sua marca permanecem privados.
Dicas
- Clique em Randomize para descobrir rapidamente paletas de cores únicas e harmoniosas.
- Use o fragmento da URL para salvar gradientes criados e editá-los mais tarde.
Perguntas frequentes
Como criar um gradiente de 3 cores para meu site?
Adicione três paradas de cor à faixa de gradiente, escolha o ângulo desejado (por exemplo, 90° ou 135°) e copie a regra CSS background: linear-gradient(...) para sua folha de estilos.
Posso extrair um gradiente de cores de uma foto enviada?
Sim. Envie sua imagem pelo botão From Image para detectar automaticamente as principais cores de destaque e criar uma paleta personalizada de gradiente.
Os gradientes CSS gerados são compatíveis com todos os navegadores?
Sim. A ferramenta gera sintaxe padrão de gradientes CSS3, compatível com todos os navegadores modernos sem exigir prefixos de fornecedores antigos.
Como exportar gradientes para aplicativos como Flutter ou SwiftUI?
Clique no botão Export Code & Swatches e selecione Flutter ou SwiftUI para gerar trechos de código nativo prontos para produção.