Toolzi LogoToolzi

Gerador de Gradientes CSS

Gere código CSS de gradientes instantaneamente com um editor visual.

0%
100%

Pré-visualização

Código CSS

background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);

O que é um gradiente CSS?

Gradientes CSS são transições de cor renderizadas diretamente pelo navegador sem imagens. Usados em fundos, bordas e efeitos de interface.

Tipos de Gradientes CSS

Gradiente Linear

As cores fazem transição ao longo de uma linha reta em um ângulo ou direção especificada. Definido com linear-gradient().

Gradiente Radial

As cores irradiam de um ponto central em forma circular ou elíptica. Definido com radial-gradient().

Gradiente Cônico

As cores giram em torno de um ponto central, como um gráfico de pizza. Definido com conic-gradient().

Como Usar o Gerador

Selecione um tipo de gradiente, ajuste a direção ou ângulo, adicione ou remova paradas de cor e copie o código CSS gerado.

Dicas para Gradientes CSS

Use rgba() ou hex com alfa para gradientes transparentes. Sobreponha múltiplos gradientes com fundos separados por vírgulas.

Perguntas Frequentes

O que é um gradiente CSS?
Gradientes CSS são transições de cor criadas com funções como linear-gradient(), radial-gradient() ou conic-gradient() sem arquivos de imagem.
Qual é a diferença entre gradiente linear e radial?
Gradientes lineares fazem transição ao longo de uma linha reta; os radiais se expandem de um ponto central em forma circular ou elíptica.
Como adicionar transparência a um gradiente CSS?
Use valores rgba() (ex.: rgba(255,0,0,0.5)) ou códigos hex de 8 dígitos (ex.: #ff000080) nas paradas de cor.
conic-gradient é suportado em todos os navegadores?
Sim, em todos os navegadores modernos: Chrome 69+, Firefox 83+, Safari 12.1+.
Posso empilhar múltiplos gradientes em um elemento?
Sim. O CSS suporta múltiplos fundos separados por vírgulas, permitindo camadas de gradientes em um único elemento.
Como criar texto com gradiente em CSS?
Aplique o gradiente como fundo e use -webkit-background-clip: text e color: transparent.
O que é uma parada de cor em um gradiente CSS?
Uma parada de cor define uma cor específica em uma posição percentual específica ao longo do gradiente.

Ferramentas Relacionadas

CSS Gradient Text Generator →