Ferramentas de Design e CSS

Gere gradientes CSS, sombras, e raios de borda, e verifique o contraste de cores para a web. 17 ferramentas — Funciona totalmente no seu navegador.

Totalmente local

Verificador de Contraste de Cores

Verifique se um par de cores texto/fundo atende aos padrões de contraste de acessibilidade WCAG.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Gradiente CSS

Crie visualmente um gradiente CSS linear ou radial e copie o código.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Box-Shadow CSS

Projete visualmente um box-shadow CSS com controles deslizantes e copie o código gerado.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Border-Radius CSS

Projete visualmente cantos arredondados — incluindo formas assimétricas — e copie o código CSS.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Conversor de PX para REM

Converta entre pixels e unidades rem, com base em um tamanho de fonte raiz personalizado.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Extrator de Paleta de Cores

Extraia as cores mais dominantes de qualquer imagem, com códigos HEX, RGB e CSS

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de captura de código

Cole código e transforme-o em uma imagem polida com fundo em gradiente e barra de título, pronta para compartilhar

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Simulador de Daltonismo

Veja como sua imagem aparece para alguém com daltonismo (protanopia, deuteranopia, tritanopia ou acromatopsia)

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de clip-path CSS

Escolha uma forma pronta (círculo, triângulo, estrela, balão de mensagem...) e copie o código clip-path.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de curva de aceleração Cubic Bezier

Arraste dois pontos para projetar visualmente uma curva de aceleração personalizada e copie o código cubic-bezier.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Glassmorphism CSS

Projete visualmente um efeito de cartão de vidro fosco e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de layout CSS Grid e Flexbox

Projete visualmente um layout Grid ou Flexbox com prévia ao vivo e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Conversor de texto para escrita à mão

Transforme texto digitado em uma imagem que parece escrita à mão em papel pautado, em vários estilos de caligrafia.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de blobs e padrões de fundo SVG

Gere uma forma orgânica aleatória (blob) ou um padrão de fundo repetitivo sem emendas em SVG, e copie ou baixe.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de animações CSS Keyframe

Crie uma animação CSS visualmente (aparecer, deslizar, zoom, saltar, girar, virar) e obtenha código @keyframes pronto para uso.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de harmonia de paleta de cores

Escolha uma cor base e obtenha uma paleta de cores harmoniosa (complementar, análoga, tríade, tétrade, monocromática).

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Gradiente Mesh

Crie um fundo de gradiente mesh suave e multiponto com um clique, e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Ferramentas relacionadas

Ferramentas de IA Ferramentas de Texto Ferramentas de PDF Ferramentas de Imagem

Ferramentas