Design e CSS
Gere CSS visualmente: sombras, gradientes, layouts flexbox e grid, animações e paletas de cores
Monte CSS visualmente e copie o código: sombras de caixa e de texto, gradientes e mesh gradients, layouts com flexbox e grid, bordas arredondadas, clip-path, filtros, transformações, animações e efeitos glassmorphism ou neumorphism. Os geradores de paletas e tons ajudam a montar um sistema de cores consistente, e os geradores de ondas, blobs e padrões em SVG criam fundos leves.
Ferramentas nesta categoria: 18
Bons pontos de partida
Todas as ferramentas desta categoria
-
Gerador de animação CSS
Crie animações CSS @keyframes a partir de predefinições ou dos seus keyframes, defina duração, atraso, repetições, direção, fill mode e uma curva cubic-bezier.
-
Gerador de border-radius
Gere border-radius CSS com cantos independentes, raios X/Y elípticos, unidades px ou % e predefinições de blobs. Gera a forma abreviada válida mais curta.
-
Gerador de clip-path
Crie formas CSS clip-path: polígonos com pontos arrastáveis e predefinições, círculo, elipse e inset com cantos arredondados. Prévia ao vivo e código para copiar.
-
Gerador de paletas de cores
Gere paletas de cores a partir de uma cor base com harmonias complementar, análoga, triádica, tetrádica, quadrada ou monocromática. Trave cores e exporte CSS/Tailwind.
-
Gerador de tons de cor
Transforme uma cor em uma escala 50–950 no estilo Tailwind, além de tints, shades e tones. Calculado em OKLCH e sRGB, exportado como variáveis CSS, Tailwind ou JSON.
-
Gerador de box-shadow CSS
Crie box-shadow CSS visualmente: empilhe várias camadas, defina deslocamentos, desfoque, expansão, inset e opacidade RGBA, veja a prévia ao vivo e copie código limpo.
-
Gerador de Flexbox CSS
Defina visualmente flex-direction, wrap, justify-content, align-items, gap e, por item, flex, order e align-self, com filhos ao vivo e CSS pronto para copiar.
-
Gerador de gradiente CSS
Crie gradientes CSS lineares, radiais e cônicos com paradas de cor arrastáveis, ângulos, modo repetido e interpolação OKLCH. Prévia ao vivo e código pronto para copiar.
-
Gerador de CSS Grid
Monte layouts CSS Grid visualmente: grid-template-columns/rows, áreas nomeadas com validação, gaps, alinhamento e posicionamento por item. Copie CSS limpo.
-
Gerador de filtros CSS
Combine funções CSS filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) em uma imagem de exemplo ou na sua.
-
Gerador de glassmorphism
Gere CSS de vidro fosco com desfoque e saturação via backdrop-filter, cor e opacidade da tonalidade, borda e sombra, incluindo o prefixo -webkit- para o Safari.
-
Gerador de gradiente mesh
Crie fundos CSS suaves no estilo mesh a partir de gradientes radiais em camadas. Arraste pontos de cor, defina o alcance, gere aleatoriamente com seed e copie CSS puro.
-
Gerador de neumorphism
Gere CSS de soft UI (neumorphism): sombras clara e escura derivadas da sua cor base, formas plana, côncava, convexa ou pressionada e quatro direções de luz.
-
Gerador de padrões CSS
Crie padrões de fundo em CSS puro – pontos, bolinhas, listras, xadrez, grade, zigue-zague e hachurado – com cores, tamanho do bloco e espessura. Sem imagens.
-
Gerador de blobs SVG
Crie formas orgânicas de blob em SVG com pontos, aleatoriedade e seeds ajustáveis. Preenchimento sólido, gradiente ou contorno; baixe o .svg ou copie a data URI CSS.
-
Gerador de ondas SVG
Gere ondas SVG suaves, com picos ou em degraus, com camadas, amplitude e seeds. Baixe o .svg ou copie como data URI de fundo CSS para divisores de seção.
-
Gerador de text-shadow
Crie efeitos CSS text-shadow com várias camadas: brilhos, contornos, 3D retrô e texto em relevo. Prévia ao vivo com o seu próprio texto e código pronto para copiar.
-
Gerador de transform CSS
Gere valores CSS transform: translate, rotate, scale, skew e, em 3D, perspective, rotateX/rotateY e translateZ, com transform-origin e prévia ao vivo.
Outras categorias
- CRC Algoritmos de verificação de redundância cíclica para detecção de erros
- MD Algoritmos de resumo de mensagens (MD2, MD4, MD5)
- SHA-1 Algoritmo Hash Seguro 1 - função hash de 160 bits
- SHA-2 Família de Algoritmo Hash Seguro 2 (SHA-224, SHA-256, SHA-384, SHA-512)
- SHA-3 Algoritmo Hash Seguro 3 baseado em Keccak
- Keccak Função hash criptográfica Keccak
- SHAKE Funções de saída extensível (SHAKE128, SHAKE256)
- cSHAKE Funções SHAKE personalizáveis
- KMAC Código de autenticação de mensagem Keccak
- Senhas e Segurança Ferramentas de geração, análise, hash e segurança de senhas
- Criptografia Criptografia simétrica e assimétrica, HMAC e geração de chaves (AES, 3DES, RSA, PGP)
- Codificação Codifique e decodifique dados: Base64, Base32, Base58, URL, entidades HTML, hexadecimal, Unicode e mais
- Formatadores Formate, minifique e valide código e dados (JSON, XML, YAML, SQL, HTML, CSS) e converta estilos de nomes
- Geradores Gere IDs, chaves, dados de teste, QR codes, códigos de barras e arquivos de configuração (UUID, chaves de API, .gitignore, Dockerfile)
- Conversores Converta formatos de dados, bases numéricas, cores, timestamps, unidades e moedas (JSON, CSV, YAML, XML)
- Ferramentas de Texto Conte, compare, limpe e transforme textos (contagem de palavras, diferenças, regex, maiúsculas, duplicados)
- Ferramentas de Imagem Ferramentas para manipular e converter imagens (Comprimir, Redimensionar, Converter)
- Ferramentas Web Ferramentas para desenvolvimento web e SEO (JWT, URLs, DNS, cabeçalhos HTTP, meta tags, sitemaps)
- Matemática e Calculadoras Calculadoras de finanças, saúde, porcentagens, aritmética para programadores e matemática do dia a dia
- Hora e Data Fusos horários, diferença entre datas, dias úteis, temporizadores, cronômetro e relógio mundial