ToolStack

Gerador de Gradientes

Crie gradientes CSS lineares e radiais visualmente e copie o código CSS.

100% privado — tudo roda no seu navegador

Publicidade

Como usar

  1. 1

    Escolha Linear ou Radial — gradientes lineares também aceitam ângulo de 0° a 360°.

  2. 2

    Escolha a cor de cada parada e arraste o controle para ajustar a posição (0–100%).

  3. 3

    Adicione até oito paradas ou remova as que não precisar.

  4. 4

    Copie o CSS gerado e cole na sua folha de estilos.

Exemplos

Azul para roxo (padrão)

Entrada

Linear · 135° · #3B82F6 0% → #8B5CF6 100%

Saída

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

Radial com três paradas

Entrada

Radial · #F59E0B → #EF4444 → #8B5CF6

Saída

background: radial-gradient(circle, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);

Perguntas frequentes

Qual é a diferença entre gradientes lineares e radiais?

Um gradiente linear mistura as cores ao longo de uma linha reta no ângulo escolhido; um radial irradia do centro para fora.

Quais navegadores suportam o CSS gerado?

Todos os navegadores modernos suportam linear-gradient() e radial-gradient() padrão — não são necessários prefixos de fornecedor.

Quantas paradas de cor posso usar?

Até oito. Cada parada tem cor própria e um controle de posição de 0% a 100%.

Ferramentas relacionadas

Gerador de Cores CSSTransforme uma cor base em uma escala de 10 tons e exporte como variáveis CSS.Seletor de CorEscolha qualquer cor e copie os valores HEX, RGB, HSL e HSV na hora.Conversor de CoresConverta entre os formatos HEX, RGB, HSL, HSV e HWB em qualquer direção.HEX para RGBConverta códigos HEX em valores RGB na hora — grátis e privado.RGB para HEXConverta valores RGB em um código HEX na hora — grátis e privado.Verificador de ContrasteVerifique na hora a razão de contraste WCAG entre cores de texto e fundo.