Gerador de gradiente CSS
Opções
Visualização ao vivo
Sobre o Gerador de Gradiente CSS
Esta ferramenta ajuda a gerar e analisar gradientes lineares e radiais CSS.
É útil para design de interface do usuário, páginas de destino, planos de fundo, botões, cartões e experimentos visuais de CSS.
Como usar a ferramenta
- Escolha gradiente linear ou radial.
- Defina ângulo, cores e posições de parada.
- Assista à atualização da visualização ao vivo instantaneamente.
- Copie o CSS gerado quando parecer correto.
- Ou cole um gradiente existente na entrada e clique em Analisar.
Dicas
- Gradientes lineares são úteis para botões, cartões e planos de fundo de heróis.
- Gradientes radiais são úteis para efeitos de brilho, holofote e fundo suave.
- Alterar as posições de parada pode tornar a transição mais suave ou mais nítida.
- O forte contraste entre as cores torna os gradientes mais dramáticos.
Verificações de gradientes CSS antes de usar transições
A qualidade depende do espaço de cor, posição dos stops, repetição, contraste e dimensões da caixa.
Inspecione as transições
Revise banding, pontos médios sujos, transparência sobre fundos, cores wide-gamut e interpolação.
Verifique stops e direção
Teste posições, hard stops, ângulos, centros radiais, size keywords e limites repetidos.
Proteja o contraste
Meça texto, ícones, borders e focus indicators na parte mais fraca do gradiente em cada tema.
Teste tamanhos reais
Revise caixas estreitas, altas, fluidas, high-density, com zoom e impressão, pois a geometria segue a caixa.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.