Sobre esta ferramenta
O Gerador de gradientes CSS cria fundos com gradientes lineares ou radiais. Cada ponto tem a sua cor e posição percentual. Adicione ou remova pontos para observar as alterações na transição.
Como utilizar
- Escolha um gradiente Linear ou Radial.
- Defina 2–6 pontos de cor com posições entre 0 e 100%.
- Nos gradientes lineares, ajuste o ângulo entre 0 e 360°. O controlo deslizante e o campo numérico mantêm-se sincronizados.
- Confira a pré-visualização e copie o CSS. Use Repor ou Carregar exemplo para comparar combinações de cores.
Exemplos de utilização
- Vermelho em 0% e azul em 100% criam um gradiente simples de duas cores.
- Adicionar uma terceira cor em 50% altera a transição central.
- Pontos de cor na mesma posição criam uma separação nítida entre cores.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);Funcionamento e explicação do CSS
linear-gradient() interpola entre pontos de cor numa direção definida; radial-gradient() faz a transição do centro para fora. As cores são validadas como HEX opaco e as posições limitadas a percentagens válidas antes de gerar a declaração background.
Utilizações comuns
- Criar fundos de páginas e cores para botões.
- Comparar rapidamente direções de gradientes multicoloridos.
- Aprender como a posição dos pontos afeta a transição.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
Qual é a diferença entre linear-gradient e radial-gradient?
O gradiente linear faz a transição numa direção reta. O radial parte do centro para fora, geralmente em círculo ou elipse.
Um gradiente CSS é uma imagem?
É uma imagem CSS gerada pelo navegador. Não exige descarregar um ficheiro de imagem nem recorrer a um serviço online.
Como altero a direção de um gradiente linear?
Altere o ângulo: 0deg aponta para cima, 90deg para a direita e 180deg para baixo.
Posso usar mais de três cores?
Sim. Esta página permite 2–6 pontos, cada um com cor e posição próprias.