Design linear, radial, and conic gradients with live preview and copy-ready CSS.
background: -webkit- linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Generated CSS follows W3C CSS Images Module Level 3 specifications. Browser compatibility may vary. WebKit prefix is included for Safari support. Test across browsers.
A CSS gradient is not an image — it is a function the browser evaluates for every pixel it paints. A linear-gradient first draws an invisible gradient line through the element at your chosen angle, places your color stops (a color + a 0–100% position) along it, then interpolates each pixel's color between the two nearest stops. radial-gradient runs that same interpolation outward from a center point (circle or ellipse), while conic-gradient sweeps it around the center in a full rotation. Two stops are the minimum; more stops let you build banded or multi-color effects, and the browser keeps each adjacent pair of stops fully opaque and smoothly blended.
Left: a 135° linear gradient whose line runs from the top-left stop (#667eea at 0%) to the bottom-right stop (#764ba2 at 100%); each intermediate pixel is a weighted mix of the two. Right: the same stop concept wrapped radially (circle/ellipse) and conically (around the center).
Leo, a front-end dev, is handed a design mock with a diagonal purple-to-blue hero background but only a screenshot — no code. He opens this generator to recreate the exact feel and ship it as copy-ready CSS.
Build CSS gradients visually with live preview. Everything runs locally; nothing is uploaded.
FreeToolHub CSS Gradient Generator is a free browser-based tool — build CSS gradients visually with live preview. No signup, no upload; everything runs locally in your browser.
Construa gradientes CSS visualmente com visualização ao vivo. Tipos linear, radial e cônico. Arraste paradas de cor, ajuste ângulos. Código padrão + WebKit.
Este gerador constrói gradientes CSS visualmente: escolha o tipo linear, radial ou cônico, arraste as paradas de cor na barra, ajuste o ângulo e a posição, e observe a visualização atualizar ao vivo. A ferramenta emite código pronto para produção incluindo a propriedade padrão e o fallback -webkit- para Safari mais antigos, com sintaxe para variantes repetidas quando padrões são o objetivo. Gradientes com múltiplas paradas, pontos médios, paradas de cor transparentes e direções lineares com precisão angular são configurados através de manipulação direta — o caminho mais rápido do fundo imaginado para o CSS enviado.
Desenvolvedores frontend prototipam fundos de destaque, botões e divisórias sem escrever manualmente a sintaxe de gradiente e retocar números às cegas. Designers fornecem especificações exatas para desenvolvedores — paradas, ângulos, valores hex — em vez de linguagem de aproximação como 'torne mais quente'. Construtores de páginas de destino seguem paletas de marca em sistemas de gradiente para cards e chamadas. Qualquer pessoa que mantém bases de código mais antigas aprecia a saída com prefixo -webkit- gerada onde ainda é necessária. A visualização ao vivo remove completamente o ciclo editar-salvar-atualizar.
(1) Escolha o tipo de gradiente: linear para mesclagens direcionais, radial para luz emanando de um ponto, cônico para efeitos de varredura e visuais de estilo pizza. (2) Adicione paradas de cor clicando na barra; arraste para posicionar, clique para editar cor e alfa, arraste as alças de ponto médio para inclinar a mesclagem. (3) Para gradientes lineares, defina o ângulo em graus; para gradientes radiais e cônicos, defina a posição central. (4) Copie o CSS gerado — padrão e com prefixo WebKit — diretamente no seu stylesheet; um alternador de repetição converte qualquer configuração em seu equivalente repetido.
Os três tipos respondem a três perguntas visuais. Gradientes lineares mesclam ao longo de uma linha e dominam as tarefas principais: fundos de destaque e seções, botões, sublinhados de texto, preenchimentos de progresso e divisórias — mesclagens sutis de duas paradas de escuro para mais escuro a 135 ou 180 graus leem como luz caindo sobre uma superfície. Gradientes radiais mesclam para fora de um ponto e simulam fontes de luz: efeitos de spotlight, vinheta, brilho suave atrás de ícones e o clássico brilho de fundo de página sutil que ancora a atenção no centro. Gradientes cônicos varrem ao redor de um círculo e constroem estrutura rotacional: gráficos de pizza, rodas de cor, spinners de carregamento, anéis de progresso no estilo radar e efeitos de badge angulares — qualquer coisa onde posição signifique direção em vez de distância. Duas regras de artesanato carregam a maior parte da qualidade: mantenha as paradas próximas em luminosidade para fundos (uma lacuna de luminosidade de 5-10 por cento basta) porque grandes saltos criam um banding visível, e prefira gradientes sobre sobreposições semi-transparentes para escurecer áreas hero fotográficas — uma sobreposição achata a imagem, um gradiente escuro preserva a profundidade.
Um gradiente é tão bom quanto sua lista de paradas, e três hábitos separam mesclagens polidas das turvas. Primeiro, ordene paradas por luminosidade assim como por posição — uma sequência de escuro para claro sente-se direcional e intencional, enquanto alternância de luminosidade lê como banding. Segundo, duas paradas geralmente são suficientes: cada parada extra reduz à metade seu controle sobre a mesclagem, então adicione pontos médios apenas para corrigir uma área específica plana ou áspera. Terceiro, mantenha o deslocamento de matiz abaixo de cerca de 90 graus entre vizinhos, a menos que queira deliberadamente uma varredura arco-íris — roxo para azul permanece rico enquanto roxo para amarelo passa por um cinza que ninguém pediu. Carregue uma predefinição, troque seus dois valores hex pelas cores da sua marca, e ajuste posições antes de adicionar qualquer coisa. Salve o resultado no seu navegador e copie o CSS — a saída é CSS puro sem dependências.
Gradientes lineares e radiais funcionam em todos os navegadores lançados nesta década. Gradientes cônicos são suportados em todos os navegadores evergreen (Chrome, Edge, Firefox, Safari) desde 2020-2021 — seguros para uso geral, com uma cor de fallback sólida recomendada para clientes antigos e webviews.
Gradientes lineares mesclam ao longo de um eixo — certos para banners, botões e sobreposições. Gradientes cônicos mesclam ao redor de um círculo — certos para gráficos de pizza, anéis de carregamento e varreduras angulares de cor. Se o design lê como 'daqui para lá', use linear; se lê como 'em círculo', use cônico.
Gradientes são pintados uma vez e armazenados em cache como qualquer imagem de fundo, então gradientes estáticos são essencialmente gratuitos. Animar posições de gradiente força repinturas — se precisar de movimento, anime uma transformação em uma camada de gradiente maior que o necessário em vez do gradiente em si para permanecer na GPU.
Mescle matizes que concordem com seus vizinhos: paradas adjacentes funcionam melhor dentro de cerca de 90 graus de matiz, ou em luminosidade similar em matizes vizinhos. Posicione paradas no ponto visual médio em vez do aritmético para manter a mesclagem uniforme — as paletas predefinidas são pontos de partida pré-balanceados.
Suporta linear-gradient (com controle de ângulo de 0° a 360°), radial-gradient (círculo/elipse com controle de posição) e conic-gradient (com ângulo inicial). Adicione paradas de cor ilimitadas com posicionamento preciso em porcentagem. A visualização ao vivo atualiza enquanto você arrasta, e a saída é CSS pronto para produção com prefixos de fornecedor se necessário.
Sim. Copie o valor da propriedade CSS, uma definição de classe completa, ou um valor arbitrário do Tailwind CSS. Também gera a marcação SVG equivalente para uso em ferramentas de design. Predefinições populares (aurora, pôr do sol, gradiente multiestilo mesh) são incluídas como pontos de partida, cada uma com 3-5 paradas de cor pré-configuradas.
It supports linear-gradient (with angle control from 0° to 360°), radial-gradient (circle/ellipse with position control), and conic-gradient (with starting angle). Add unlimited color stops with precise percentage positioning. The live preview updates as you drag, and output is production-ready CSS with vendor prefixes if needed.
Yes. Copy the CSS property value, a full class definition, or a Tailwind CSS arbitrary value. It also generates the equivalent SVG markup for use in design tools. Popular presets (aurora, sunset, mesh-style multi-gradient) are included as starting points, each with 3-5 color stops pre-configured.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.