6XC

Gerador de Gradiente CSS

Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código.

838 visualizações

Gradientes CSS

Um gradiente é uma transição suave entre cores, escrito como linear-gradient(ângulo, cor1, cor2), radial-gradient(...) ou conic-gradient(...). Escolha o tipo, o ângulo e até três cores — a pré-visualização e o CSS pronto para copiar são atualizados instantaneamente. Os gradientes são renderizados pelo navegador, então não custam nenhum download de imagem e ficam nítidos em qualquer tamanho.

Perguntas Frequentes

O que significa o ângulo em um gradiente linear?

0° aponta para cima, 90° para a direita, 180° para baixo — o ângulo é a direção para a qual o gradiente avança. 135° dá a popular diagonal de cima à esquerda para baixo à direita.

Quando devo usar radial ou cônico?

O radial se mistura do centro para fora — ótimo para holofotes e vinhetas. O cônico gira ao redor do centro como uma roda de cores — ótimo para gráficos de pizza e anéis de arco-íris.

Ferramentas Semelhantes

Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar Gerador de Borda CSS Desenhe uma borda visualmente — espessura, estilo (solid, dashed, dotted, double…), cor e raio — com pré-visualização em tempo real. Gerar