Gerador de Consultas CSS Crie regras @media precisas de CSS para qualquer ponto de ruptura e combinação de recursos sem memorizar a sintaxe. Escolha um pré-definido de framework, escolha o tipo de consulta e ative os recursos médios extras que precisa — a ferramenta monta um bloco válido com tanto a sintaxe clássica quanto moderna de intervalo. Como Usar Escolha um Framework ...
Experimente a ferramenta »Gerador de Fundo CSS Aurora / Blob de Gradiente Crie fundos suaves e brilhantes no estilo aurora com até quatro orbis coloridos que podem ser arrastados, recoloridos e redimensionados em uma área de trabalho em tempo real. A ferramenta gera CSS pronto para uso usando radial-gradient e filter: blur(), ou um SVG portátil usando feGaussianBlur — assim, você pode inserir o resultado em qualquer site, landing ...
Experimente a ferramenta »Gerador de Efeitos de Filtro SVG Designe efeitos SVG visualmente. Escolha um primitivo de filtro — desfoque gaussiano, variações de matriz de cor (rotação de tom, saturação, luminância para alfa), turbulência com deslocamento, sombra, ou um pré-definido de matriz de convolução (emboço, gravura, aprimoramento, detecção de bordas) — e ajuste seus parâmetros com sliders, enquanto acompanha uma prévia SVG em tempo real em texto, ...
Experimente a ferramenta »Gerador de Animação de Carregamento em CSS Crie oito animações populares de carregamento em CSS puro — anel girando, dois anéis, pontos pulsando, pontos balançando, bola balançando, barras de equalizador, círculo pulsando e indicador de digitação. Ajuste a cor, o tamanho, a largura da linha e a duração; observe a prévia em tempo real atualizando instantaneamente; copie os @keyframes + HTML mínimo para seu projeto. Sem JavaScript, sem...
Experimente a ferramenta »Gerador de Ruído e Textura SVG Crie ruídos orgânicos e texturas turbulentas diretamente no seu navegador usando o filtro SVG feTurbulence. Arraste os sliders, ajuste a semente, escolha uma cor de tom e veja a textura atualizar em tempo real. Exporte como SVG inline, uma URL de imagem de fundo CSS ou um filtro SVG reutilizável que você pode aplicar ...
Experimente a ferramenta »Gerador de Códigos de Cor para Terminal ANSI Crie sequências de escape ANSI (códigos de renderização gráfico) para colorir e estilizar a saída do terminal. Escolha uma cor de fundo e de fundo, ative estilos como negrito ou sublinhado e obtenha uma string de escape pronta para colar, além de uma prévia em tempo real de como ela se exibe em um terminal. Como usar: Digite o texto de exemplo...
Experimente a ferramenta »Gerador de Folha de Amostras de Cor Cole uma lista de cores e veja imediatamente uma folha impressa com amostras coloridas e rótulos em hex. Misture qualquer formato de cor do CSS — hex curto e longo, rgb(), rgba(), hsl(), hsla() ou nomes de cores como tomate — e baixe a folha como PNG de alta resolução ou escalável...
Experimente a ferramenta »Conversor de Espaço de Cor Colete uma cor em qualquer formato comum e veja imediatamente sua representação em nove espaços de cor ao lado. O conversor detecta automaticamente HEX, RGB, HSL, HSV/HSB, CMYK, CIE LAB, LCH, CIE XYZ, Oklab e cores nomeadas do CSS, em seguida, calcula todas as outras representações usando correção de gamma sRGB e o padrão D65...
Experimente a ferramenta »Conversor de Tecido e Fio Cross-reference os tamanhos de agulhas de tricô, tamanhos de agulhas de crochê e categorias de peso de fio entre os padrões dos EUA, Reino Unido/Canadá, métrico e japonês em um único local. Útil quando um padrão de um país lista um tamanho de agulha ou nome de fio que não corresponde ao que está impresso em seus suprimentos locais. Como usar: Escolha uma categoria...
Experimente a ferramenta »Gerador de Texto com Gradiente CSS Crie efeitos de texto impactantes com gradientes de múltiplas cores e código CSS pronto para produção em um único clique. Escolha suas cores, escolha linear ou radial, observe a prévia em tempo real atualizando, depois copie o snippet para sua folha de estilo. Como Usar Digite o texto de exemplo que deseja visualizar. Defina o tamanho e o peso da fonte...
Experimente a ferramenta »Gerador de Imagem de Cartão Social Open Graph Crie imagens perfeitas para compartilhamento social para Open Graph, Twitter Cards, LinkedIn e Facebook diretamente no seu navegador. Digite seu título, descrição e nome do site, escolha um layout e tema, depois baixe um PNG, JPG ou WebP nas dimensões exatas esperadas por cada plataforma — sem necessidade de ferramenta de design ou upload...
Experimente a ferramenta »Gerador de CSS Neumórfico Crie elementos de interface com efeito suave e exibidos (neumórficos) sem precisar ajustar manualmente dois sombras de caixa opostas. Escolha uma cor base, escolha uma forma (plana, côncava, convexa ou comprimida), arraste os sliders para distância, intensidade, desfoque e ângulo de luz, depois copie o CSS gerado diretamente para seu projeto. Como Usar Escolha uma cor de fundo. A mesma cor...
Experimente a ferramenta »Gerador de Tons e Tonalidades de Cor Escolha um hex ou RGB e obtenha instantaneamente 10 tons (sua cor misturada para branco) e -10 tons (misturada para preto) como amostras visuais. Clique em qualquer amostra para copiar seu código hex, ou exporte o conjunto completo como propriedades CSS personalizadas, variáveis SCSS, JSON ou uma lista simples de hex. ...
Experimente a ferramenta »Gerador de Escala de Cores do Tailwind CSS Cole um único código hexadecimal e obtenha instantaneamente uma escala completa de 50 a 950 no estilo do Tailwind com passos perceptivelmente iguais. A escala é construída no espaço de cores OKLCH, portanto, cada etapa parece uma subida de brilho perceptível para o olho humano — não apenas uma queda linear em RGB ou HSL.
Experimente a ferramenta »Canvas de Arte em Pixels & Exportação em CSS Pinte sprites em estilo de 8 bits com precisão diretamente no seu navegador e exporte-os como arte em sombras de caixa pura em CSS, SVG escalável, PNG rasterizado ou JSON portátil. O canvas escala de 8×8 até 64×64, traz paletas clássicas (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) e oferece pincel, borracha, ...
Experimente a ferramenta »Visualizador e Editor de Caminho SVG Cole qualquer atributo d de caminho SVG e veja-o renderizado em tempo real. Esta ferramenta divide cada comando em seus parâmetros e ponto final absoluto, desenha manipuladores de controle de Bezier sobre a prévia e reescreve o caminho entre coordenadas absolutas e relativas com precisão configurável. É desenvolvida para autores de SVG...
Experimente a ferramenta »Gerador de Flexbox CSS (Visual) Projete layouts de Flexbox visualmente e copie CSS pronto para produção. Ajuste a direção, alinhamento, empacotamento, espaçamento e sobrescritas por item, enquanto uma prévia em tempo real atualiza instantaneamente. Sem suposições, sem viagens até o Chrome DevTools — apenas escolha o comportamento do contêiner que precisa, veja como ele é renderizado e copie as regras geradas. Como usar Escolha uma direção flex (linha, ...
Experimente a ferramenta »Gerador de Ícones para README O Gerador de Ícones para README cria ícones perfeitos em pixels, no estilo dos ícones do Shields.io, diretamente no seu navegador. Escolha um modelo pré-definido ou crie o seu próprio rótulo e mensagem, escolha cores e um estilo (plano, quadrado plano, para o ícone ou plástico), e obtenha saída pronta para Markdown, HTML, SVG e URL de dados. Sem chamadas a APIs externas, sem dependência de rede, sem ícones quebrados...
Experimente a ferramenta »Gerador de Animação com Chaves CSS Crie animações CSS @keyframes visualmente com pré-visualização em tempo real. Escolha entre 10 predefinições populares, como bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash e wobble — ou crie sua própria animação personalizada a partir do zero. Ajuste o tempo, a suavização, o número de iterações, a direção e o modo de preenchimento, depois copie o ...
Experimente a ferramenta »Calculadora de Especificidade CSS A Calculadora de Especificidade CSS ajuda você a determinar a pontuação exata de especificidade de qualquer seletor CSS. Entender a especificidade é crucial para depurar conflitos de CSS e escrever folhas de estilo manuteníveis. Insira um ou mais seletores e veja instantaneamente suas pontuações (a,b,c) comparadas lado a lado. Como Usar Insira um seletor CSS por linha no ...
Experimente a ferramenta »Adicione ferramentas de IO ao seu navegador favorito para acesso instantâneo e pesquisa mais rápida
Placar é uma forma divertida de acompanhar seus jogos, todos os dados são armazenados em seu navegador. Mais recursos serão lançados em breve!
Atualizar: Nosso ferramenta mais recente foi adicionado em 20 de junho de 2026
Ajude-nos a continuar fornecendo ferramentas gratuitas valiosas
