Gerador de gradientes CSS
Crie um gradiente CSS linear, radial ou cónico com 2 a 8 paragens de cor, veja a pré-visualização e copie o CSS pronto a colar.
- Funciona no navegador
- Sem envio
- O resultado fica no seu dispositivo
Privacidade e limitesExecuta no seu navegador. Nada é enviado.
O conteúdo das entradas fica neste separador; a Refentra não o envia nem guarda. As contagens agregadas opcionais de ações só são enviadas com o seu consentimento para medição de utilização. Limpe o espaço ao terminar.
Perfil suportado: 2–8 cores HEX sRGB opacas, crescentes 0–100%; linear/radial/cónico, prévia e CSS.
Máximo 200.000 unidades UTF-16; os parsers podem ter limites inferiores. Worker: 15 segundos (regex 1,5 segundos).
Verificar os dados e o resultado
- Preparar e escolher a operação
Escolha o gradiente linear, radial ou cónico; indique as paragens de cor por ordem e um ângulo adequado a esse tipo.
- Verificar um exemplo concreto
Experimente esta amostra e compare com o resultado indicado: linear, angle=90, colors="#000000,#ffffff", positions="0,100" → linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Rever antes de reutilizar o resultado
Copie o valor CSS gerado para a declaração de fundo pretendida; verifique o gradiente no tamanho real do elemento.
Respostas para esta tarefa
Um gradiente mantém o contraste do texto em todo o lado?
Não. O contraste muda ao longo da superfície; verifique o fundo mais fraco por trás de cada zona de texto, e não apenas as extremidades.
O que devo verificar se os dados falharem?
Use de 2 a 8 cores hexadecimais opacas, com posições de paragem crescentes entre 0 e 100; reordene as paragens, em vez de contar com a correção implícita do navegador.
Onde termina o alcance desta ferramenta?
Gera um valor de fundo em CSS, e não uma exportação de imagem, um gradiente animado nem uma prova de que a apresentação é idêntica em todos os ecrãs.