Command Palette

Search for a command to run...

GE

Gerador de gradiente CSS

Crie belos gradientes de CSS com visualização ao vivo

O que é o gerador de gradiente CSS?

CSS Gradient Generator é uma ferramenta online gratuita que permite criar gradientes de CSS bonitos com uma interface visual e uma visualização ao vivo. Ele suporta tipos de gradiente linear, radial e cônico, permitindo que você crie transições de cores impressionantes para fundos de sites, botões, cartões e outros elementos de interface do usuário.

A ferramenta fornece uma interface intuitiva de arrastar e soltar para adicionar e posicionar paradas de cor, ajustando a direção e o ângulo do gradiente e ajustando a opacidade. Você pode ver exatamente como seu gradiente ficará em tempo real, facilitando o experimento com diferentes combinações de cores até obter o resultado perfeito.

Quando estiver satisfeito com seu gradiente, basta copiar o código CSS gerado e colá-lo em sua folha de estilo. A ferramenta gera um CSS limpo e compatível com navegadores cruzados que funciona em todos os navegadores modernos. Nenhuma experiência em design ou codificação é necessária para criar gradientes com aparência profissional.

Uma coisa a saber sobre como os navegadores desenham gradientes: as cores são interpoladas no sRGB, que não é perceptualmente uniforme Misturar duas cores fortemente opostas, sendo azul a amarelo o caso clássico, leva o ponto médio através de um cinza dessaturado que nenhuma das cores finais sugere As correções usuais são adicionar uma parada no meio para orientar o caminho, ou escolher as cores finais mais próximas na roda Repetir uma parada na mesma posição produz uma borda dura em vez de uma mistura, que é como os efeitos de listra e banda são construídos Os prefixos de fornecedor não são mais necessários para gradientes padrão em qualquer navegador que ainda receba atualizações, portanto, a saída mais curta também é a mais compatível Os gradientes são pintados como fundos, portanto, eles precisam de uma caixa com dimensões para serem visíveis.

Como usar o gerador de gradiente CSS?

  1. Escolha o tipo de gradiente

    Selecione entre os tipos de gradiente linear, radial ou cônico. Cada tipo cria um tipo diferente de efeito de transição de cores.

  2. Adicionar paradas de cor

    Clique para adicionar paradas de cores e escolha cores para cada parada. Arraste-os para ajustar sua posição ao longo do gradiente.

  3. Ajuste a direção e o ângulo

    Defina a direção ou o ângulo do gradiente para gradientes lineares ou a posição central para os gradientes radiais para controlar como as cores fluem.

  4. Copie o código CSS

    Copie o código CSS gerado com um clique e cole-o diretamente em sua folha de estilo. O código está pronto para uso em qualquer projeto da web.

Principais características

  • Saída de classe e inline

    O gradiente é emitido tanto como uma regra CSS quanto como uma declaração de fundo nua para um estilo em linha, cada um com seu próprio botão de cópia

  • Vários tipos de gradiente

    Crie gradientes lineares, radiais e cônicos com total controle sobre a direção, o ângulo e a forma

  • Visualização visual ao vivo

    Veja sua atualização de gradiente em tempo real ao ajustar as cores, paradas e direções

  • Cópia CSS com um clique

    Copie o código CSS limpo e cruzado pronto para colar em suas folhas de estilo

Frequently Asked Questions

Defina a propriedade Background para uma função de gradiente: Background: linear-gradient(90deg, #ff0000, #0000ff). O primeiro valor é a direção (um ângulo como 90deg, ou uma palavra-chave como "para a direita"), e tudo depois de uma lista de cores paradas. Construa o gradiente visualmente aqui e copie a declaração finalizada diretamente em sua folha de estilo.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

cssgradientlinearradialconiccolorbackgroundgenerator