Gerador de gradientes CSS

Gerador de gradientes CSS: usos e orientações práticas

Escolha duas cores HEX opacas de três ou seis dígitos e um ângulo inteiro de 0 a 360 graus. No CSS, 0 graus aponta para cima, 90 para a direita e 180 para baixo. As cores ficam em 0 e 100%; não são acrescentadas paradas intermediárias ou transparência. A prévia muda com os controles, enquanto Gerar CSS prepara o resultado para copiar ou baixar. A saída inclui uma cor de fundo alternativa e uma declaração background-image com linear-gradient. Cole as declarações no seletor adequado da folha de estilos. A aparência depende das proporções do elemento. O gerador não verifica automaticamente o contraste de texto sobreposto. Confira o componente em seu tamanho real.

Gerador de gradientes CSS. Comece pelo exemplo e observe a relação entre entrada e saída antes de colar um documento completo. O exemplo é pequeno para permitir a conferência sem outro aplicativo. Depois substitua os dados por uma amostra representativa do seu caso e ajuste as opções. O botão principal executa a operação; carregar o exemplo apenas preenche os controles. Se você modificar qualquer entrada depois do cálculo, o resultado anterior ficará oculto para evitar copiar uma versão que já não corresponde aos dados. Execute novamente depois de cada alteração. Limpar restaura os valores iniciais e descarta o resultado da página. Copiar coloca o texto nos dados da área de transferência quando o navegador permite. Baixar cria o arquivo somente quando você solicita expressamente; calcular não inicia downloads. Guarde uma cópia separada da entrada caso precise repetir o trabalho depois, pois o formulário não é um arquivo de projetos nem mantém histórico de operações. Para comparar testes, salve cada resultado com um nome que descreva as opções utilizadas e confirme qual arquivo está aberto.

Gerador de gradientes CSS. Confira uma amostra curta cujo resultado seja previsível e outro caso com os detalhes importantes para seu trabalho. Examine o começo e o fim da saída: uma cópia aparentemente correta pode pertencer a dados anteriores caso você tenha salvo várias versões fora da página. Se surgir erro, reduza a amostra até localizar o dado problemático e confira os limites indicados. Não elimine informações apenas para remover um aviso: verifique primeiro se a operação escolhida corresponde ao seu objetivo. Antes de usar um arquivo em outro programa, abra e confira caracteres, estrutura e valores. O arquivo contém o resultado, não as configurações do formulário. Para explicar como foi obtido, guarde também os dados de entrada e as opções utilizadas.

Uma verificação prática antes de usar o resultado

Gerador de gradientes CSS. Crie um gradiente linear de duas cores, ajuste o ângulo e copie ou baixe o CSS. Confira o resultado antes de copiar ou baixar.