Ferramentas de CSS e design online grátis

Geradores visuais de CSS, cores, sombras e gradientes.

9 ferramentas

Gerador de box-shadow CSSDesenhe sombras realistas empilhando várias camadas, como fazem os melhores design systems. Ajuste deslocamento, desfoque, expansão, cor e opacidade de cada camada e copie o resultado em CSS ou como classe Tailwind.

Conversor de cores (HEX, RGB, HSL, CMYK, OKLCH)Digite uma cor em qualquer formato — #hex, rgb(), hsl(), hwb(), oklch() ou um nome como «tomato» — e obtenha na hora todas as equivalências, o contraste WCAG sobre branco e preto e uma escala de tons e sombras.

Gerador de paletas de coresParta da cor da sua marca e obtenha uma escala completa de 50 a 950, perceptualmente uniforme e pronta para o seu design system, junto com combinações harmônicas. A cor original é mantida exata no passo correspondente.

Gerador de gradientes CSSDesenhe fundos com gradiente arrastando paradas de cor sobre uma barra, escolha o tipo (linear, radial ou cônico) e copie um CSS pronto para produção, com cor de fallback e versão moderna em OKLCH sem zonas acinzentadas.

Gerador de CSS GridConfigure colunas, linhas e espaços com controles deslizantes e veja o resultado ao vivo. Copie o CSS e o HTML prontos para colar no seu projeto.

Gerador de glassmorphism (vidro fosco)Desenhe cards e painéis de vidro fosco vendo o resultado na hora sobre fundos diferentes. O CSS gerado inclui o prefixo -webkit- que o Safari ainda exige.

Extrator de paleta de coresEnvie uma foto, logo ou ilustração e descubra suas cores principais. Escolha quantas cores quer, copie cada HEX com um clique ou toda a paleta como variáveis CSS.

Gerador de neumorfismo (Soft UI)O neumorfismo faz os elementos parecerem surgir do próprio fundo com duas sombras opostas, uma clara e outra escura. Ajuste cada parâmetro, escolha de onde vem a luz e copie o CSS.

Gerador de ondas e blobs SVGCrie divisores de seção ondulados e formas orgânicas únicas. Ajuste pontos, amplitude e cores, gere de novo até gostar e copie o código SVG ou baixe um PNG.