Gerador de gradiente CSS e box-shadow | Pré-visualização segura em SVG

O que o Gerador de gradiente CSS e box-shadow com pré-visualização segura de SVG faz

Visualize gradientes lineares, radiais e cônicos, múltiplos box-shadows e código SVG em uma única tela. Copie apenas o resultado ajustado como CSS, sem precisar calcular manualmente ângulos, posições de cor, desfoque e expansão.

O SVG é analisado como XML e remove style, animações, scripts, atributos de evento, referências externas etc. Em seguida, não é inserido diretamente no DOM da página; é exibido isoladamente como imagem via Blob. Você pode verificar a quantidade de itens removidos, copiar e salvar o SVG após a verificação de segurança e converter para PNG o que o navegador puder renderizar. Todo o processamento é feito no navegador.

Como criar gradientes CSS

1. Escolher tipoPara fundos que mudam de cor em uma direção, use linear; para luz ou círculos que se expandem do centro, use radial ou elíptico; para círculo cromático ou medidores, use cônico.
2. Definir cores e posiçõesDefina códigos de cor e posições de 0 a 100%. Use “Adicionar cor” para incluir cores intermediárias.
3. Ajustar ângulo e centroEm linear e cônico, o ângulo muda; em circular, elíptico e cônico, a posição central muda na pré-visualização.
4. Copiar CSSCopie o resultado exibido na tela como declaração background-image e aplique ao elemento desejado.

Para mudanças abruptas de cor, especifique a mesma posição para duas cores diferentes. Para listras, ative “Repetir” e defina a última posição de cor para um valor pequeno, como 20%, para facilitar o ajuste.

Como escolher entre linear, radial e conic-gradient

Valores de Box Shadow e aparência

box-shadow é especificado na ordem: “direção X”, “direção Y”, “desfoque”, “expansão” e “cor”. X positivo move para a direita, negativo para a esquerda; Y positivo move para baixo, negativo para cima. O desfoque deve ser 0 ou mais; quanto maior, mais suave o contorno. Expansão positiva aumenta a área total da sombra; negativa a diminui.

Para sombras naturais, não apenas torne o preto mais transparente, mas use um azul-marinho ou cinza-escuro que combine com o fundo, com transparência. Para cartões flutuantes, aumente um pouco o Y e amplie o desfoque; para campos pressionados, use “Interna”. Em várias camadas, separe uma sombra curta para contato com o solo e uma sombra ampla para sensação de ar, facilitando o ajuste.

Por que visualizar SVG com segurança

SVG é um formato de imagem, mas, como documento XML, pode conter scripts, links, style, animações, atributos de evento e HTML. Colar um SVG de origem desconhecida diretamente em uma página da web pode levar a processamentos indesejados ou comunicação externa. Esta ferramenta remove script, style, animações, links, foreignObject, iframe, object, embed, atributos de evento e referências a URLs externas, exibindo-o isoladamente como imagem.

No entanto, a remoção aqui não garante a segurança em todos os ambientes de uso. CMS, e-mail, softwares de design etc. podem permitir ou proibir elementos específicos. Antes de publicar, verifique a política de SVG do sistema usado e considere converter materiais não confiáveis para PNG em outro formato.

Verificação de viewBox, width e height

viewBox representa o intervalo de coordenadas internas do SVG. Por exemplo, “0 0 1200 630” significa que o canto superior esquerdo é 0,0 e as coordenadas têm 1200 de largura e 630 de altura. width e height são as dimensões de referência para exibição. Em layouts responsivos, mesmo com width em 100%, se o viewBox for adequado, a proporção é mantida.

Ao usar ícones ou logotipos em outros tamanhos, não amplie o elemento individualmente; mantenha o viewBox e defina as dimensões de exibição via CSS. SVGs com muito espaço em branco podem ter espaço desnecessário no próprio viewBox. Use os valores exibidos nesta ferramenta para corrigir o arquivo original.

Qualidade de exibição a verificar antes da implementação

• Em gradientes com texto sobreposto, verifique se é legível tanto nas áreas mais claras quanto nas mais escuras.
• Não use apenas cores para indicar estados; adicione texto, ícones, bordas ou outras pistas.
• Não dependa apenas de box-shadow; mantenha uma borda ou diferença de fundo visível mesmo em ambientes de baixo contraste.
• No SVG, substitua o texto por texto HTML, exceto quando a imagem for necessária, para facilitar a leitura por leitores de tela e a ampliação.
• Ao converter para PNG, a resistência a ampliação vetorial é perdida. Exporte nas dimensões necessárias para o uso.
• Como navegadores podem renderizar CSS e SVG de forma diferente, verifique também nos principais navegadores usados no ambiente de publicação.

Tratamento do CSS e SVG inseridos

O cálculo de gradientes, a geração de sombras, a análise, remoção e renderização de SVG e a conversão para PNG são executados no navegador. Os valores de CSS, o código SVG e os arquivos SVG selecionados não são enviados aos servidores do WiseChecker nem a APIs externas. Recarregar a página apaga as entradas e a pré-visualização.

Ao converter SVG para PNG, o navegador remove imagens e fontes externas que não podem ser renderizadas com segurança. Portanto, SVGs que dependem de materiais externos podem diferir da aparência original. Incorpore as imagens necessárias de forma segura após verificar os direitos de uso e, para evitar diferenças de fonte, converta o texto em caminhos.

Perguntas frequentes sobre pré-visualização de CSS e SVG

Ferramentas gratuitas relacionadas