Todas as ferramentas de teste de tela

    Gerador de Imagem com Gradiente

    Crie um gradiente linear ou radial de duas ou três cores. Ajuste o ângulo e o tamanho da imagem, baixe um fundo com gradiente ou copie o CSS para seu site.

    • Gradientes lineares e radiais
    • Download de imagem e CSS

    Use números inteiros de 1 a 8192 por lado, com até 16,777,216 pixels no total. As imagens são geradas no navegador.

    HEX · #RRGGBB
    HEX · #RRGGBB

    Prévia ao vivo

    1920 × 1080 px
    Gerador de Imagem com Gradiente

    A prévia é redimensionada para caber. O arquivo baixado usa exatamente as dimensões em pixels indicadas acima.

    background: linear-gradient(90deg, #2563eb, #e879f9);

    O CSS e o PNG podem apresentar pequenas diferenças devido à interpolação de cores de cada navegador.

    Teste de Gradiente

    Como usar

    1. Defina as dimensões da imagem e escolha um gradiente linear ou radial.
    2. Escolha as cores inicial e final, adicione uma cor intermediária se desejar e ajuste o ângulo do gradiente linear.
    3. Baixe o PNG ou JPEG, ou copie a declaração CSS do fundo.

    Limites e condições

    Esta ferramenta cria fundos decorativos com gradiente. Para verificar banding, use o teste de gradiente separado. Uma imagem gerada não certifica a profundidade de bits nem a precisão de cores da tela.

    Perguntas

    O que significa o ângulo do gradiente?

    Os ângulos seguem as convenções CSS: 0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo. Gradientes radiais começam no centro.

    O gradiente baixado será exatamente igual ao CSS?

    Eles usam as mesmas cores e direção, mas a interpolação do navegador e o redimensionamento da imagem podem produzir pequenas diferenças. Use a imagem baixada quando precisar de um resultado fixo em pixels.

    Continue explorando

    Gerador de Imagem Vazia Transparente

    Crie um PNG vazio e realmente transparente em um tamanho personalizado. Confira o fundo alfa e baixe uma imagem para layouts, sobreposições ou recursos de design.

    Gerador de Imagem de Cor Sólida

    Crie uma imagem de cor sólida com seu código HEX e dimensões exatas. Baixe um PNG ou JPEG para papel de parede liso, fundo ou referência de tela.

    Gerador de Imagem Placeholder

    Gere uma imagem provisória com as dimensões ou seu próprio texto. Defina as cores de fundo e texto, escolha medidas exatas e baixe um PNG ou JPEG para mockups.