Gerador de gradiente CSS — crie gradientes no seu navegador
Desenhe um gradiente visualmente e copie o CSS com um clique.
Esta ferramenta roda inteiramente no seu navegador. Seus arquivos nunca são enviados — eles ficam no seu dispositivo.
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);Escrever a sintaxe de gradiente à mão é trabalhoso — uma porcentagem errada ou uma unidade esquecida e todo o fundo desanda. Este gerador permite que você crie o gradiente visualmente: adicione quantas paradas de cor quiser, arraste suas posições, alterne entre linear e radial e veja a pré-visualização se atualizar na hora.
Tudo roda no seu navegador. Não há cadastro, nenhuma ida e volta a um servidor e nada para instalar — o CSS é gerado no seu dispositivo no momento em que você muda uma configuração, pronto para copiar direto na sua folha de estilos.
Como usar Gerador de gradiente CSS
- Escolha um tipo de gradiente — linear ou radial.
- Para um gradiente linear, defina o ângulo em graus.
- Ajuste cada parada de cor com o seletor de cores e seu controle deslizante de posição.
- Adicione ou remova paradas até a pré-visualização ficar do jeito certo.
- Clique em "Copiar CSS" para copiar a regra de background gerada.
Perguntas frequentes
Que CSS isto gera?
Ele gera uma única propriedade background usando a função padrão linear-gradient() ou radial-gradient(), para que você possa colá-la diretamente em qualquer folha de estilos ou estilo inline.
Quantas paradas de cor posso adicionar?
Quantas você precisar. Cada parada tem sua própria cor e posição, e o gradiente se atualiza ao vivo conforme você adiciona, edita ou remove paradas.
O ângulo se aplica a gradientes radiais?
Não. O ângulo afeta apenas gradientes lineares. Gradientes radiais se espalham para fora a partir do centro, então o controle de ângulo fica oculto quando o radial está selecionado.
Algo é enviado para um servidor?
Não. A ferramenta roda inteiramente no seu navegador. Suas cores e o CSS gerado nunca saem do seu dispositivo.