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

Gradiente CSS Sunset – Código pronto

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 um pôr do sol pronto carregado: coral quente #ff7e5f fluindo para pêssego macio #feb47b, da esquerda para a direita. A visualização mostra a largura total imediatamente e a linha CSS abaixo está pronta para ser copiada como está.

Desbotamentos quentes de coral a pêssego são um elemento básico da seção heróica porque são lidos como amigáveis ​​e enérgicos, sem texto branco opressor. Este par fica próximo o suficiente para que o ponto médio permaneça limpo - nenhuma faixa cinza turva no meio, o modo de falha usual de gradientes entre cores distantes.

Use-o inalterado ou personalize-o: gire o ângulo para um pôr do sol diagonal, puxe a primeira parada para dentro para uma presença de coral mais forte ou adicione uma terceira parada com uma ameixa profunda perto de 100% para uma sensação de crepúsculo. Cada alteração atualiza o CSS copiável instantaneamente.

🛡️
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.