Ferramentas de design e CSS

Monte gradientes, sombras e efeitos com CSS pronto para copiar.

100% no navegador Grátis para sempre Sem cadastro

Efeitos CSS são muito mais fáceis de projetar no olho do que de escrever de memória. Ninguém lembra a sintaxe exata de um gradiente cônico com várias paradas, de uma sombra em camadas que se leia como profundidade suave, ou de uma curva cubic-bezier que pareça natural em vez de mecânica. Estes geradores dão controles visuais e produzem o CSS correspondente ao vivo, então você ajusta até ficar certo e copia a regra direto para a sua folha de estilos.

Ferramentas desta categoria

Gerador de Lorem Ipsum Gere o clássico texto de preenchimento Lorem Ipsum por parágrafos, frases ou palavras — puro ou dentro de parágrafos HTML, pronto para copiar. Gerador de gradiente CSS Monte gradientes lineares, radiais e cônicos com paradas de cor arrastáveis e prévia ao vivo — e copie um CSS limpo e pronto para usar. Gerador de favicon Envie uma imagem e baixe um pacote completo: favicon.ico, PNGs de 16px a 512px, ícone Apple touch, webmanifest e as tags HTML para colar. Prévia de Open Graph Veja seu link exatamente como as redes sociais vão exibir. Conversor de Formatos de Cor HEX ⇄ RGB ⇄ HSL ⇄ OKLCH com prévia ao vivo. Seletor de Cores Online Seleção visual de cor com códigos HEX / RGB / HSL instantâneos. Verificador de Contraste (WCAG) Teste qualquer par de cores contra os limites WCAG AA e AAA. Gerador de Paletas de Cores Paletas harmônicas de qualquer cor base — com variáveis CSS. Gerador de Box Shadow A sombra CSS perfeita com sliders e prévia ao vivo. Playground de CSS Flexbox Ajuste as propriedades flexbox visualmente e copie o CSS. Gerador de CSS Grid Desenhe grids visualmente — receba CSS limpo na hora. Otimizador de SVG Reduza SVGs com segurança — o resultado visual não muda. Calculadora de Proporção de Tela Resolva largura/altura a partir de qualquer proporção na hora. Conversor de PX para REM e EM Calculadora de unidades CSS com tabela de conversão incluída. Gerador visual de CSS Border Radius De cantos simples a formas blob orgânicas, arrastando. Gerador de animações CSS ao vivo Keyframes profissionais sem escrever código à mão. Conversor de CSS para Tailwind De propriedades CSS para utility classes em uma colada. Gerador de Imagens de Código Capturas de código elegantes em PNG. Simulador de Daltonismo Veja seu design como daltônicos veem. Calculadora de Especificidade CSS Qual seletor vence? Pontuação (a,b,c). Editor e Visualizador de Path SVG Veja, entenda e transforme paths SVG. Gerador de Imagens Placeholder Imagens de teste sob medida em PNG ou SVG. Gerador de tailwind.config.js Monte um tailwind.config.js com suas cores, fontes, dark mode e plugins oficiais.

Sobre estas ferramentas

Gradientes, sombras e profundidade em camadas

Profundidade convincente quase nunca vem de uma única sombra. Interfaces reais empilham uma sombra próxima, escura e apertada para o contato com outra mais larga, suave e clara para a queda ambiente — e o CSS permite várias sombras separadas por vírgulas exatamente para isso. Gradientes funcionam igual: adicionar paradas de cor intermediárias é o que remove aquele cinza barrento que aparece quando o navegador interpola entre dois tons distantes.

Formatos de cor e contraste

HEX é compacto, RGB é explícito, HSL permite construir uma paleta movendo um único número, e o moderno OKLCH mantém a luminosidade percebida estável entre matizes, de modo que um conjunto de cores realmente pareça um conjunto. Converter entre eles é rotina; verificar contraste não é opcional, porque texto abaixo da razão WCAG é ilegível para muita gente e é sinalizado por qualquer auditoria de acessibilidade.

Movimento que não parece barato

Uma transição linear parece mecânica porque nada físico se move em velocidade constante. Curvas de aceleração resolvem isso, e a diferença entre uma boa transição e uma irritante costuma estar na duração mais que na curva: 150 a 250 ms para pequenas mudanças de estado e um pouco mais para movimentos amplos. Ver a curva animando ao lado do código é o que torna esse julgamento rápido.