Gênero de Gradientes CSS

Crie gradientes lineares, radiais e conicos no seu navegador.

Colorir paradas

Use as manchas de parada ou teclas para editar posições. Cada parada inclui uma cor explícita, opacidade e percentagem.

Preparar

Processamento local nativo

Seu gradiente permanece neste navegador.Não são enviadas cores ou CSS gerados para Converter.

Gráfico de importação limitado

A importação aceita gradientes lineares(), radial-gradientes(), ou conico-gradentes() com cores e percentagens hex. Declarações, URLs, variáveis e funções desconhecidas são rejeitadas localmente.

FALBACK acessível

O CSS gerado inclui um sólido back-back de fundo colorido ao lado do gradiente para renderes não suportados e o acesso ao cromo de controle.

Perguntas frequentes

O meu gradiente está sendo carregado?

No. Estado graduado, cores, CSS importado e CSS gerado permanecem no seu navegador.

Quais tipos de gradientes CSS são suportados?

O gerador cria uma saída linear-gradiente(), radial-gradente() e conic-graduente()) com várias paradas de cor hex.

O que posso importar?

A importação aceita um gramado deliberadamente limitado usando uma função gradiente suportada, cores hex, percentagens opcionais e valores de ângulo ou posição limitados.

Gênero de Gradientes CSS

Construa gradientes de CSS lineares ou radiais e previe paradas de cores, ângulo, posição e repetição.

Entrada
Tipo de gradiente, paradas de cor, posições, ângulo e configurações repetidas.
Saída
Uma declaração de fundo CSS e cópia ao vivo.
Limitações reais
A renderização do navegador pode diferir ligeiramente por motor, e a ferramenta não avalia contraste ou garante suporte em navegadores hereditários.
Privacidade e tratamento de dados
tipo de gradiente, paradas de cores, posições, ângulo e configurações de repetição são processados nesta tabela do navegador. Converter não recebe ou armazenará; fechar ou re-carregar a página limpa o estado de trabalho, a menos que a ferramenta explicitamente ofereça uma download local.

Como usar essa ferramenta

  1. Fornece tipo de gradiente, paradas de cores, posições, ângulo e configurações repetidas nos controles de ferramentas.
  2. Escolha as configurações que afetam uma previsão ao vivo e uma declaração de fundo CSS cópiável, e execute a ferramenta.
  3. Revise uma previsão ao vivo e uma declaração de fundo CSS cópiável antes de copiar ou baixar.

Modos de falha comuns

Uma parada de cor, cor inadecuada ou posição incompatível impede que uma declaração CSS válida seja construída.

Exemplo útil

Crie um gradiente linear de 90 graus de #111827 a 0% para #f59e0b a 100% e copie a declaração.