Crie gradientes CSS lineares e radiais visualmente, ajuste cores e ângulo, e copie o CSS.
Gradientes CSS são os padrões de fundo da web moderna. Um gradiente linear mescla cores ao longo de uma linha num ângulo escolhido; um gradiente radial mescla do ponto central para fora. Ambos são declarados em uma única propriedade CSS, renderizam em qualquer resolução sem arquivo de imagem e não custam nada em peso de rede. Este gerador constrói a declaração visualmente.
Escolha duas ou três cores, defina o ângulo para linear ou deixe como está para radial, e a pré-visualização mostra o resultado. A linha CSS abaixo está pronta para copiar — cole como propriedade background e funciona em qualquer navegador lançado na última década. Três cores produzem gradientes mais ricos que duas, e a cor do meio é a que faz ou quebra o design.
A ferramenta roda no seu navegador. Não há chamada ao servidor, nenhuma imagem gerada, nenhum arquivo para baixar. O que você vê na pré-visualização é o que o navegador renderiza a partir do CSS, o que significa que o resultado em produção será idêntico.
Sim. Gradientes CSS são suportados em todos os navegadores modernos. O código gerado usa a sintaxe padrão sem prefixos de fabricante.
A ferramenta oferece três pontos de cor. Para gradientes mais complexos, comece com o código de três pontos e adicione mais manualmente no seu CSS.
A direção do gradiente em graus. 0 vai para cima, 90 para a direita, 180 para baixo. O controle cobre de 0 a 360.
Sim. Aplique o gradiente como background-image, defina background-clip: text e color: transparent. O CSS que esta ferramenta gera é a parte do background-image.
Não. É uma declaração CSS. O navegador a renderiza matematicamente, então fica nítida em qualquer tamanho e não adiciona peso à página.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.