CSS Gradient
Generator
Gere belos gradientes CSS (linear, radial, cônico) e padrões de fundo com uma interface intuitiva. Grátis, seguro, roda no seu navegador.
Editar Cor
Código CSS Gerado
Código CSS Gerado
Você também pode gostar
Sobre o Gerador de Gradientes CSS
O Gerador de Gradientes CSS é uma ferramenta gratuita para desenvolvedores e designers criarem belos fundos de gradiente e padrões puramente em CSS, sem usar imagens ou JavaScript. Através de uma interface intuitiva, você pode criar gradientes lineares, radiais e cônicos, exportando o código para uso direto.
Ajuste múltiplas cores e a transparência (alfa) de maneira fluida. Com 24 predefinições de design e 12 tipos de padrões CSS, você pode facilmente transformar ideias em código real diretamente do navegador.
Como usar
Selecionar Tipo e Configurações Básicas
Abra a aba 'Gradiente' e selecione o estilo: linear, radial ou cônico. Para os lineares, ajuste o ângulo; para os radiais, defina o ponto central e a forma para definir a expansão das cores.
Adicionar e Editar Cores
Clique sobre a barra de gradiente para adicionar uma nova cor. Arraste os pinos para ajustar a transição e use o seletor inferior (HEX ou HSLA) para refinar a cor e a transparência.
Visualizar e Copiar Código
Verifique os resultados em tempo real. Use o botão 'Tela Cheia' para ver a aparência real no fundo e clique em 'Copiar CSS' para colar o código gerado em sua folha de estilos.
Glossary
- Gradiente CSS
- Técnica que utiliza funções CSS como linear-gradient() ou radial-gradient() para criar fundos onde duas ou mais cores se fundem suavemente. Não usar imagens ajuda a melhorar o tempo de carregamento da página.
- Parada de Cor
- Uma posição específica (de 0% a 100%) em um gradiente que define a cor. Colocar várias paradas muito próximas pode criar limites nítidos e cortes duros.
- Gradiente Linear (linear-gradient)
- O método de gradiente mais comum onde as cores mudam ao longo de um ângulo (ex: 135deg) ou direção (ex: to right).
- Gradiente Radial (radial-gradient)
- Um método em que as cores se expandem de um ponto central específico, na forma de um círculo ou elipse.
- Gradiente Cônico (conic-gradient)
- Um método em que as cores giram em torno de um eixo central. Frequentemente usado para criar gráficos de pizza puramente com CSS.
- Cor HSLA
- Um método de especificar cores usando quatro valores: Matiz, Saturação, Luminosidade e Alfa. É excelente para ajustes intuitivos como 'deixar um pouco mais escuro'.
Perguntas Frequentes
- Q.Posso usar o código gerado em um site comercial?
- Sim, é totalmente gratuito para uso comercial. O código CSS gerado por esta ferramenta não tem restrições de direitos autorais.
- Q.Posso usar a ferramenta no smartphone?
- Sim, a interface é responsiva e o recurso de arrastar as cores foi otimizado para funcionar perfeitamente em telas sensíveis ao toque.
- Q.O gradiente não aparece em navegadores antigos como o IE.
- Navegadores muito antigos, incluindo o IE11, podem não suportar funções modernas como o conic-gradient. Recomendamos definir um background-color sólido como alternativa de segurança.
- Q.Como alterar o tamanho do padrão gerado?
- Você pode ajustar a escala de repetição usando o controle deslizante 'Tamanho' na aba Padrão. Isso atualizará a propriedade background-size no CSS gerado.
- Q.Posso salvar o gradiente como um arquivo de imagem?
- Como a ferramenta gera código CSS, ela não possui exportação direta para PNG ou JPG. No entanto, você pode abrir o modo Tela Cheia e tirar uma captura de tela do seu dispositivo.
Casos de Uso
Design de Seção Hero
Aplicar gradientes pastéis ou de pôr do sol na primeira dobra de um site pode causar uma forte imersão visual nos usuários.
Implementando Glassmorphism
Definindo um gradiente com transparência alfa e combinando-o com backdrop-filter: blur(), você pode criar componentes UI modernos de vidro fosco.
Padrões de Fundo Leves
Criar padrões de pontos ou listras usando apenas CSS melhora a estética visual sem piorar a performance e o PageSpeed Insights.
Visualização de Dados
Gradientes cônicos são extremamente úteis para montar gráficos de pizza usando apenas CSS, dispensando bibliotecas JavaScript.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.