Ferramentas de design: cor, efeitos CSS, imagens

Escolha cores, monte gradientes e sombras CSS, converta e corte imagens - tudo no cliente, sem upload, sem cadastro.

Um hub pensado para design e UI. Escolha cores de marca e confira contraste WCAG, gere paletas harmônicas e rampas de tom para um design system, monte gradientes CSS / box-shadows / clip-paths / filtros / glassmorphism com pré-visualização ao vivo e declarações prontas para colar, e passe uma imagem pelas ferramentas de conversão / redimensionamento / compressão / corte / conta-gotas sem subir nada. Tudo no navegador; os arquivos não saem do dispositivo.

Cor

Conversor de Cores (HEX, RGB, HSL)

Converta cores entre HEX, RGB, HSL e OKLCH.

Gerador de paleta de cores

Gere paletas complementares, análogas, triádicas, tetrádicas e monocromáticas a partir de qualquer cor base.

Gerador de tons de cor

Gere 10 tons e 10 matizes de qualquer cor - pronto em lista hex ou variáveis CSS.

Verificador de contraste

Verificador de contraste WCAG com proporção ao vivo, selos AA/AAA e texto de exemplo.

Seletor de cor de imagem

Solte uma imagem, clique em qualquer pixel para obter hex, RGB e HSL - e monte uma paleta enquanto seleciona.

Efeitos CSS

Gerador de Gradientes CSS

Crie gradientes CSS lineares e radiais com pré-visualização ao vivo.

Gerador de Box-Shadow CSS

Empilhe várias sombras CSS com predefinições, pré-visualização ao vivo e declaração pronta para colar.

Gerador de filtro CSS

Playground CSS filter ao vivo com sliders para blur, brilho, contraste, saturação, sépia, escala de cinza, invert, hue-rotate e opacidade.

Gerador de glassmorphism

Vidro fosco em CSS com pré-visualização ao vivo - ajuste cor de fundo, backdrop blur, borda e sombra sobre um fundo carregado.

Formas e animação

Gerador de clip-path CSS

Crie clip-paths visualmente - triângulo, hexágono, estrela, balão - com pré-visualização ao vivo e CSS pronto para colar.

Gerador de border-radius

Border-radius assimétrico com 8 valores de canto, pré-visualização ao vivo e predefinições (pílula, blob, folha, ticket).

Gerador cubic-bezier

Editor cubic-bezier visual com pré-visualização animada e 12 predefinições de easing padrão.

Processamento de imagem

Conversor de imagem

Converte PNG, JPG, WebP e AVIF no seu navegador - sem upload, sem cadastro.

Redimensionar imagem

Redimensiona imagens por pixels ou porcentagem no seu navegador - sem upload.

Compressor de imagem

Reduz o tamanho de JPG e WebP com slider de qualidade e pré-visualização antes/depois ao vivo.

Cortador de imagem

Corte imagens arrastando uma seleção - livre ou com proporções fixas (1:1, 4:3, 16:9, 9:16).

Imagem para Base64

Converte uma imagem em Data URI (base64) com trechos CSS e HTML prontos para colar - ou cole um Data URI para pré-visualizar.

Outros

Gerador de Favicon

Solte uma imagem quadrada, baixe favicons PNG em todos os tamanhos padrão.

Ferramentas de design gratuitas: conta-gotas de cor, geradores CSS e utilitários de imagem

A maioria das ferramentas de design é ou app de desktop pesado ou site ultra-especializado. Este hub reúne os pequenos utilitários do dia a dia de um designer web ou de produto: conversor de cores hex / RGB / HSL, gerador de paleta que emite as cinco harmonias clássicas a partir de um hex base, gerador de rampa de tons (50-950 estilo Tailwind), verificador de contraste WCAG com selos AA / AAA, conta-gotas que pega cores de qualquer imagem enviada, editor de gradiente CSS multi-stops, empilhador de box-shadow com predefinições Material elevation, editor de clip-path com doze polígonos predefinidos, gerador de border-radius assimétrico, editor de easing cubic-bezier, playground de filtros CSS (blur / brilho / contraste / saturação / hue-rotate) e gerador de glassmorphism com prévia sobre fundo carregado.

No lado da imagem, cinco ferramentas no cliente: conversor de formato (PNG / JPG / WebP / AVIF), redimensionador com trava de aspecto, compressor por qualidade com pré-visualização antes/depois, codificador base64 / Data URI para uso inline em HTML e CSS e cortador drag-rectangle com predefinições de proporção. Cada uma roda via Canvas do navegador; as imagens não saem do aparelho, então as sessões ficam privadas e não há tempo de upload em conexões lentas.

Todas as ferramentas são gratuitas, sem cadastro, com texto localizado em inglês, francês, espanhol, alemão e português. As páginas carregam em milissegundos e pesam bem menos que 250 KB de JavaScript - leve mesmo num laptop em tethering com celular ou atrás de um proxy corporativo que limita uploads.