⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Gerador de gradiente cônico CSS

Crie gradientes CSS visualmente: tipo linear, radial ou cônico, controle deslizante de ângulo e até seis pontos de cor com visualização ao vivo de largura total e código copiável.

90°
Processando... 0%

Resultado

Esta página abre o gerador de gradiente com o tipo cônico já selecionado: em vez de esmaecer ao longo de uma linha ou sair do centro, as cores giram em torno do centro como um ponteiro de relógio, começando no ângulo que você definiu no controle deslizante.

conic-gradient() é a mais nova das três funções de gradiente CSS e aquela por trás de gráficos de pizza, rodas de cores e atraentes efeitos de borda rotativa. As posições de parada em porcentagem são posições ao redor do círculo - duas paradas em 0% e 100% se misturam suavemente em toda a volta, enquanto as paradas colocadas próximas umas das outras criam fatias nítidas.

Ajuste o ângulo inicial e pare até que a visualização esteja correta e, em seguida, copie a linha de fundo. Todos os navegadores modernos suportam gradientes cônicos, portanto, o código é seguro para envio.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Seleção do tipo de gradiente (linear, radial, cônico) com um controle deslizante de ângulo para modos lineares e cônicos.
  • Lista de paradas de cores: duas paradas para iniciar, adicionar ou remover até seis, cada uma com seu próprio seletor de cores e posição em porcentagem.
  • Linha CSS de fundo copiável, além de páginas predefinidas prontas para pôr do sol, oceano e gradientes pastel.

Principais benefícios

✓ A visualização de largura total é redesenhada a cada alteração – tipo, ângulo e cada interrupção de cor – para que o CSS que você copia seja exatamente o que você viu.
✓ Até seis paradas de cores com posições individuais cobrem tudo, desde um simples desbotamento de duas cores até fundos complexos de várias bandas.
✓ Uma declaração, três motores: alterne entre linear, radial e cônico sem reconstruir seus batentes.

Casos de uso

  • • Componha um plano de fundo de seção herói arrastando o ângulo e as paradas de cor em vez de editar manualmente linear-gradient() e recarregar.
  • • Compare os mesmos limites de cor dos gradientes lineares, radiais e cônicos com uma chave — os limites são transferidos entre os tipos.
  • • Pegue uma combinação comprovada na página predefinida de pôr do sol, oceano ou pastel e ajuste-a nas cores de sua marca.