Gerador de Gradiente CSS
Escolha cores e ângulos para gerar código CSS de gradiente com pré-visualização em tempo real
Características
Pré-visualização e código atualizados simultaneamente
Aparência e CSS mudam em tempo real conforme você altera cores e ângulos
Suporta gradientes linear, radial e cônico
Especifique detalhes como ângulo, forma e posição do centro para cada tipo
Até 10 cores ajustáveis com arrasto
Ajuste a posição das cores arrastando na barra e a transparência com controle deslizante
8 amostras e geração aleatória
Comece com esquemas de cores clássicos ou aleatórios e faça ajustes finos
Como usar
Escolha o tipo
Selecione o tipo de gradiente entre linear, radial ou cônico
Defina as cores
Escolha cores usando códigos ou amostras, adicione mais cores com "Adicionar cor" e ajuste posição e transparência
Ajuste a orientação
Para linear, especifique ângulo ou use botões de direção; para radial e cônico, defina a posição do centro
Copie o código
Use o botão "Copiar" para copiar o CSS de uma linha e colar em seu estilo
Casos de uso
Criar fundo de imagem hero
Defina a cor de fundo do topo ou botões do site sem escrever código
Escolher cores para títulos de blog
Selecione uma amostra semelhante e aplique ao fundo dos títulos do artigo
Sobreposição para fotos
Crie uma camada semi-transparente com cor reduzida em transparência sobre fotos
Ajustar gradientes multicoloridos
Ajuste gradualmente a posição das bordas entre 3 ou mais cores arrastando
Conhecimentos básicos
Diferenças entre linear, radial e conic
CSS oferece 3 funções de gradiente com diferentes formas de mudança de cor, todas usadas na propriedade background.
- linear-gradient：linear-gradient é um gradiente linear onde a cor muda ao longo de uma linha em um ângulo especificado.
- radial-gradient：radial-gradient é um gradiente radial onde a cor se expande em forma de círculo ou elipse da posição central para o exterior.
- conic-gradient：conic-gradient é um gradiente cônico onde a cor muda girando no sentido horário ao redor da posição central.
Correspondência entre ângulo e palavras-chave de direção
O ângulo do linear-gradient começa em 0deg apontando para cima, aumentando no sentido horário. Pode também ser expresso com palavras-chave de direção como "to right", onde 90deg é "to right" e 180deg é "to bottom".
Como escrever paradas de cor e transparência
Um ponto de parada de cor (color stop) é a posição onde uma cor ocorre no gradiente, com 0% no início e 100% no fim. Por exemplo, "#3B82F6 0%, #8B5CF6 100%" especifica uma transição do azul no início para roxo no fim.
- Formato #RRGGBB：O formato #RRGGBB expressa cores usando números hexadecimais de 2 dígitos para vermelho, verde e azul, onde #FF0000 representa vermelho opaco.
- Formato rgba：O formato rgba adiciona transparência (0–1) aos valores RGB (0–255), onde 0.5 de transparência representa uma cor semi-transparente.
Segurança e privacidade
Tudo no navegador
Os dados inseridos são processados apenas no seu navegador e não são enviados para fora.
Processado apenas no navegador
Geração de código de gradiente é processado inteiramente no seu navegador, e os dados de entrada não são enviados para o servidor.
Comunicação criptografada com HTTPS
O carregamento da página também é criptografado por TLS, e o conteúdo não pode ser lido por terceiros.
Sem envio a terceiros
O conteúdo de entrada não é enviado para serviços externos como redes de publicidade ou rastreadores.
Sem salvamento automático de resultados
Cores e configurações escolhidas e sugestões de entrada não são armazenadas no servidor.
Siga RAKKOTOOLS na Busca do Google
185 ferramentas úteis ficam mais fáceis de encontrar na Busca do Google e na Busca por IA!
- Encontrado na busca
- Exibido também na busca por IA
- Descubra novas ferramentas
Informações de atualização
- update #312
Adicionado gerador de gradiente CSS, gerando código ao escolher cores e ângulos