Gerador de gradientes CSS
Crie um gradiente CSS linear, radial ou cônico com 2 a 8 paradas de cor, veja a prévia e copie o CSS pronto para colar.
- Funciona no navegador
- Sem upload
- O resultado fica no seu dispositivo
Privacidade e limitesRoda no seu navegador. Nada é enviado.
O conteúdo das entradas fica nesta aba; a Refentra não o envia nem armazena. As contagens agregadas opcionais de ações só são enviadas com seu consentimento para medição de uso. Limpe o espaço ao terminar.
Perfil compatível: 2–8 cores HEX sRGB opacas, crescentes 0–100%; linear/radial/cônico, prévia e CSS.
Máximo 200.000 unidades UTF-16; parsers podem aceitar menos. Worker: 15 segundos (regex 1,5 segundo).
Trabalhe com a entrada e o resultado
- Prepare e escolha a operação
Escolha o gradiente linear, radial ou cônico; informe as paradas de cor em ordem e um ângulo adequado a esse tipo.
- Confira um exemplo concreto
Use este exemplo e compare com o resultado indicado: linear, angle=90, colors="#000000,#ffffff", positions="0,100" → linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Confira antes de reutilizar a saída
Copie o valor CSS gerado para a declaração de fundo desejada; confira o gradiente no tamanho real do elemento.
Respostas para esta tarefa
Um gradiente mantém o contraste do texto em toda a superfície?
Não. O contraste muda ao longo da superfície; confira o fundo mais fraco atrás de cada região de texto, e não só as pontas.
O que conferir se a entrada for rejeitada?
Use de 2 a 8 cores hexadecimais opacas, com posições de parada crescentes de 0 a 100; reordene as paradas em vez de depender de uma correção implícita do navegador.
Onde esta ferramenta termina?
A ferramenta gera um valor de fundo em CSS, e não uma imagem exportada, um gradiente animado nem a prova de que a exibição é idêntica em todas as telas.