Skip to main content
FreeToolkit .ai

Gerador de Gradiente Radial em CSS Crie gradientes radiais em CSS com forma, posição e cores personalizadas.

Gerador de Gradiente Radial illustration
🎨

Gerador de Gradiente Radial

Crie gradientes radiais em CSS com forma, posição e cores personalizadas.

1

Escolha Cores

Defina a cor do centro e a cor da borda para o gradiente.

2

Configure Forma

Selecione a forma de círculo ou elipse e defina a posição do centro.

3

Copie Código CSS

Copie o código CSS gerado para seu projeto.

Loading tool...

What Is Gerador de Gradiente Radial?

Um gerador de gradiente radial cria gradientes CSS que se irradiam a partir de um ponto central em um padrão circular ou elíptico. Ao contrário dos gradientes lineares que transicionam ao longo de uma linha reta, os gradientes radiais criam efeitos semelhantes a holofotes, orbes brilhantes e efeitos de profundidade que são comumente usados no design web moderno. Você pode controlar a forma do gradiente (círculo ou elipse), a posição central e as cores. O gerador produz código CSS radial-gradient() que funciona em todos os navegadores modernos. Os gradientes radiais são particularmente eficazes para criar profundidade visual, efeitos de holofote em seções hero, fundos decorativos e efeitos de iluminação sutis que tornam designs planos mais dimensionais.

Why Use Gerador de Gradiente Radial?

  • Opções de formas de círculo e elipse para diferentes efeitos
  • Posição do centro ajustável com controles deslizantes X/Y
  • Atualizações de visualização ao vivo à medida que você altera as configurações
  • Saída CSS limpa e pronta para produção
  • Gratuito para usar sem cadastro

Common Use Cases

Efeitos de Holofote

Crie efeitos de holofote que atraem atenção em seções de destaque ou imagens de produtos.

Efeitos de Brilho

Gere fundos de orbes brilhantes para cartões, modais ou elementos decorativos.

Profundidade e Dimensão

Adicione profundidade visual a designs planos com transições de cor radiais sutis.

Efeitos de Vignette

Crie vignettes escuras sobre imagens para um look cinematográfico.

Technical Guide

O CSS radial-gradient() cria um gradiente irradiando a partir de um ponto. A sintaxe é: radial-gradient(forma no posição, cor1, cor2). A forma pode ser "círculo" (raio uniforme em todas as direções) ou "elipse" (raio que corresponde à proporção do elemento). A posição usa valores percentuais (50% 50% é o centro). Palavras-chave de tamanho como closest-side, farthest-corner controlam até onde o gradiente se estende. As paradas de cor funcionam da mesma forma que nos gradientes lineares. O navegador interpola as cores do centro para fora em círculos ou elipses concêntricos. Os gradientes radiais são compostáveis - você pode camada múltiplos gradientes radiais usando separação por vírgula em background-image para efeitos complexos como múltiplas fontes de luz.

Tips & Best Practices

  • 1
    Use "círculo" para gradientes redondos perfeitos e "elipse" para formas com proporção de aspecto
  • 2
    Posicione o centro fora do centro (por exemplo, 30% 30%) para efeitos de iluminação assimétricos
  • 3
    Camadas múltiplas de gradientes radiais para efeitos complexos de multi-fonte de luz
  • 4
    Use transparente como cor da borda para efeitos de desvanecimento sutil sobre fundos
  • 5
    Combine com background-blend-mode para efeitos de sobreposição criativos

Related Tools

Seletor de Cores - free online tool

Seletor de Cores

Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

🎨 Color Tools
Gerador de Gradiente Linear - free online tool

Gerador de Gradiente Linear

Crie gradientes lineares CSS personalizados com cores, ângulo e paradas de cor.

🎨 Color Tools
Gerador de Gradientes Cônicos - free online tool

Gerador de Gradientes Cônicos

Crie gradientes cônicos em CSS para gráficos de pizza, rodas de cores e efeitos de varredura.

🎨 Color Tools
Misturador de Cores - free online tool

Misturador de Cores

Misture duas cores juntas com uma proporção ajustável e veja o gradiente completo.

🎨 Color Tools
Gerador de Filtros CSS - free online tool

Gerador de Filtros CSS

Aplique efeitos de filtro CSS como blur, brilho, contraste e muito mais com controles visuais.

🎨 CSS & Design

Frequently Asked Questions

Q Qual é a diferença entre círculo e elipse?
Círculo cria um gradiente perfeitamente redondo, independentemente das dimensões do elemento. Elipse se estica para corresponder à proporção de aspecto do elemento, criando uma forma oval em elementos não quadrados.
Q Posso posicionar o centro em qualquer lugar?
Sim, usando os controles deslizantes de posição X e Y (0-100%). O padrão é 50% 50% (centro). Movê-lo cria efeitos de iluminação assimétricos e fora do centro.
Q O radial-gradient é suportado em todos os navegadores?
Sim, o radial-gradient() é suportado em todos os navegadores modernos sem prefixos de fornecedor.

About This Tool

Gerador de Gradiente Radial is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.