As ferramentas de desenvolvimento que você usa todos os dias, tudo em um só lugar.

Conversores, formatadores, hashes, validadores e os pequenos utilitários que você fica reabrindo permanecem juntos em vez de se perderem entre as abas.

GitHub

/ Ferramentas

■

/ Buscador de ferramentas

109 ferramentas

/ Gerador de gradientes

Tipo de gradiente

Ângulo: 90°

0°90°180°270°360°

Paradas de cor

100%

Prévia do gradiente

Código CSS

Valor da propriedade CSS

Background Image

/ Ferramenta selecionada

■

Gerador de gradientes - ferramenta de geração gratuita

Crie belos gradientes CSS com múltiplos pontos de cor

■ 01

O que são gradientes CSS?

Gradientes CSS criam transições suaves entre duas ou mais cores. Eles podem ser usados como fundos, bordas e outras propriedades. Gradientes são renderizados pelo navegador e se dimensionam perfeitamente sem pixelização.

■ 02

Como funciona?

Gradientes funcionam definindo paradas de cor em posições específicas ao longo de um caminho. Gradientes lineares fazem a transição das cores ao longo de uma linha reta em um ângulo especificado, enquanto gradientes radiais fazem a transição de um ponto central para fora em…

■ 03

Casos de exemplo

Abrange Gradiente linear, Gradiente radial e Gradiente com múltiplas paradas, para você comparar entradas e saídas comuns rapidamente.

/ Ferramentas relacionadas

/ Código

■

Código-fonte da ferramenta selecionada, mostrado aqui ao lado da versão ao vivo à direita.

/ Código-fonte

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {