Gerador de Gradientes CSS
Crie gradientes CSS lineares, radiais e cônicos visualmente. Adicione paradas de cor, ajuste ângulos e copie o CSS pronto para usar.
Tipo de gradiente
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%);
Gradientes predefinidos
Como usar esta ferramenta
- Escolha um tipo de gradiente — Linear, Radial ou Cônico — usando os botões na parte superior do editor.
- Ajuste o ângulo (para gradientes lineares e cônicos) ou a posição central (para radiais) para controlar a direção.
- Edite as paradas de cor: clique em uma amostra de cor para abrir o seletor, arraste o controle deslizante de posição e ajuste a opacidade.
- Clique em '+ Adicionar parada' para inserir mais cores, ou no ícone de lixeira para remover uma parada.
- Clique em 'Copiar CSS' para copiar o código, 'Baixar PNG' para salvar o gradiente como imagem, ou 'Compartilhar URL' para obter um link compartilhável.
Por que usar nosso Gerador de Gradientes CSS?
Criar gradientes CSS à mão significa memorizar a sintaxe e adivinhar valores de ângulo. Nosso editor visual se atualiza em tempo real enquanto você arrasta paradas e escolhe cores. A saída sempre inclui as regras padrão e com prefixo -webkit- para que seu gradiente funcione em todos os navegadores modernos.
Perguntas Frequentes
Como adiciono transparência a um gradiente CSS?
Use o controle deslizante de opacidade ao lado de cada parada de cor. A ferramenta gera valores rgba(), para que cada parada possa ter seu próprio nível de transparência. Uma parada com 0% de opacidade fica completamente transparente.
O que é um gradiente cônico?
Um gradiente cônico varre as cores em torno de um ponto central — como uma roda de cores — em vez de ao longo de uma linha reta (linear) ou para fora de um centro (radial). É comumente usado para gráficos de pizza e animações de carregamento.
Como uso um gradiente como fundo CSS?
Copie o CSS gerado e cole na sua folha de estilos. Por exemplo: .elemento { background: linear-gradient(135deg, #6366f1, #ec4899); }.
Qual é a diferença entre gradientes lineares e radiais?
Um gradiente linear faz a transição de cores ao longo de uma linha reta em um ângulo específico. Um gradiente radial irradia de um ponto central em forma circular ou elíptica.
Esta ferramenta gera CSS compatível com navegadores?
Sim. A saída sempre inclui a versão prefixada com -webkit- junto com a propriedade CSS padrão, garantindo compatibilidade com Safari e navegadores mais antigos baseados em Chromium.
Ferramentas Relacionadas
Markdown Table Generator
Build Markdown tables visually or paste from Excel, Google Sheets, or CSV. Set column alignment and export GFM.
UUID Generator
Generate random UUIDs for apps, databases, and APIs.
Base64 Encoder / Decoder
Encode and decode Base64 text quickly and easily.
Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, HSV, and CMYK instantly. Check WCAG contrast ratios.
Ferramentas Visitadas Recentemente
Regex Tester
DeveloperTest and debug regular expressions with real-time match highlighting, group capture, and substitution.
Social Media Image Resizer
ImageResize and crop images to the exact size for Instagram, YouTube, X, Facebook, LinkedIn, TikTok, and Pinterest with one-click presets.
SERP Snippet Preview
DeveloperPreview how your title tag and meta description render in Google, with live pixel-width limits for desktop and mobile.