Gerador de gradiente CSS
Opções
Parada de cor 1
Parada de cor 2
Color3
Estado
Inativo
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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador / Parser de Box Shadow CSS
Gere, analise e visualize valores de `box-shadow` CSS. Ajuste offset, blur, spread, cor e `inset`.
Utilitários Diversos
›
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Codificador/Decodificador de Entidade HTML
Codifique e decodifique entidades HTML instantaneamente em seu navegador.
Codificação e Segurança
›
Preview de Meta Tags / Open Graph
Visualize snippets do Google e do Open Graph e gere meta tags.
SEO e Webmaster
›
Perguntas frequentes sobre o gerador de gradiente CSS
O que é um gradiente CSS?
Um gradiente CSS é uma imagem gerada por CSS que faz uma transição suave entre duas ou mais cores.
Esta ferramenta suporta gradientes lineares?
Sim. Você pode gerar e analisar gradientes lineares.
Esta ferramenta suporta gradientes radiais?
Sim. Você também pode gerar e analisar gradientes radiais.
Posso colar um gradiente existente?
Sim. Cole uma string de gradiente CSS no campo de entrada e clique em Analisar.