Quais tipos de gradiente CSS esta ferramenta suporta?

Linear, radial e conico. Linear usa um angulo em graus. Radial escolhe circulo ou elipse mais uma posicao. Conico usa um angulo from e uma posicao.

Como funcionam os color stops?

Cada stop e uma cor hex mais uma posicao opcional de 0% a 100%. Deixe a posicao vazia para o navegador espacar os stops. Voce precisa de pelo menos duas cores validas.

Devo copiar a regra background completa ou so o gradiente?

Use Copiar background para `background: linear-gradient(...);` pronto para colar. Use Copiar valor quando precisar so da funcao, por exemplo em `background-image` ou uma custom property.

Posso usar transparente ou hex de 8 digitos?

Sim. Digite #rrggbbaa (ou escolha uma cor solida e edite o hex). Hex invalidos sao ignorados ate voce corrigir.

Meus dados saem do dispositivo?

Nao. O Gerador de Gradientes CSS roda apenas no navegador. Cores e ajustes nao sao enviados nem armazenados em servidor.

Ferramentas geradoras

Gerador de Gradientes CSS

Crie gradientes CSS para fundos, botoes e heroes sem sair do navegador.

O CSS do gradiente e gerado no navegador. Nada e enviado.

Tipo de gradiente

Angulo (graus)

0 e para cima, 90 direita, 180 baixo, 270 esquerda.

Color stops

Cor do stop 1
Cor
Posicao %
Cor do stop 2
Cor
Posicao %

Saida CSS

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

Sobre o Gerador de Gradientes CSS

Crie gradientes CSS para fundos, botoes e heroes sem sair do navegador. Alterne entre linear, radial e conico, ajuste angulo ou posicao, adicione ate oito color stops e copie uma declaracao `background:` pronta ou so o valor do gradiente. Combine com o Conversor HEX para RGB para as cores ou o Minificador CSS antes de publicar. Nada e enviado.

Como usar o Gerador de Gradientes CSS

Escolha linear, radial ou conico.
Defina o angulo (linear / conico) ou a forma e posicao (radial / conico).
Edite os color stops - hex e % opcional - ou adicione mais.
Copie o CSS de background ou o valor do gradiente para sua folha de estilos. Tudo fica no seu dispositivo.

Exemplos de Gerador de Gradientes CSS

Lavagem diagonal de marca

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - fundo comum para heroes ou cards.

Spotlight radial suave

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) para vinheta suave ou fundo de modal.

Roda de cores conica

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) para graficos e aneis decorativos.

Fade linear com tres stops

Adicione um stop do meio (ex. #22c55e a 50%) entre duas cores de marca para uma mistura mais rica.

Casos de uso comuns

Desenhar fundos de heroes e secoes em CSS
Criar fills de botoes e badges com varios stops
Prototipar spotlights radiais e vinhetas suaves
Fazer graficos conicos ou aneis decorativos
Copiar declaracoes background prontas para producao

Perguntas frequentes sobre o Gerador de Gradientes CSS

Quais tipos de gradiente CSS esta ferramenta suporta?: Linear, radial e conico. Linear usa um angulo em graus. Radial escolhe circulo ou elipse mais uma posicao. Conico usa um angulo from e uma posicao.
Como funcionam os color stops?: Cada stop e uma cor hex mais uma posicao opcional de 0% a 100%. Deixe a posicao vazia para o navegador espacar os stops. Voce precisa de pelo menos duas cores validas.
Devo copiar a regra background completa ou so o gradiente?: Use Copiar background para `background: linear-gradient(...);` pronto para colar. Use Copiar valor quando precisar so da funcao, por exemplo em `background-image` ou uma custom property.
Posso usar transparente ou hex de 8 digitos?: Sim. Digite #rrggbbaa (ou escolha uma cor solida e edite o hex). Hex invalidos sao ignorados ate voce corrigir.
Meus dados saem do dispositivo?: Nao. O Gerador de Gradientes CSS roda apenas no navegador. Cores e ajustes nao sao enviados nem armazenados em servidor.

Conversor de HEX para RGB

Converta HEX para RGB (e o inverso) com HSL, CMYK, escala de tons, cartões de contraste WCAG e snippet de tokens CSS - conversor de cores grátis online.

Conversor de RGB para HSL

Converta RGB para HSL e HSL para RGB na hora. Conversor de cores grátis com amostra ao vivo e CSS rgb() e hsl() prontos para copiar.

Conversor PX para REM

Converta px para rem e em online com tamanho de fonte base configuravel. Conversor px para rem gratis com tabela de referencia rapida. Roda no navegador.

Minificador de CSS

Minificador de CSS online grátis. Comprima e minifique CSS removendo comentários e espaço em branco - folhas de estilo menores e páginas mais rápidas.