Ferramentas de Design
Paletas de cores, ferramentas de tipografia, calculadoras de espaçamento e utilitários de design UI.
Tailwind Color Reference
Procure todas as paletas de cores Tailwind CSS com valores hex e RGB.
Spacing Scale Generator
Gere escalas de espaçamento consistentes para seu sistema de design.
Font Pairing Guide
Descubra combinações de fontes harmoniosas para títulos e texto do corpo.
Line Height Calculator
Calcule a altura da linha ideal para tipografia legível.
Data URL Encoder
Converta arquivos para Data URLs base64 para incorporação em HTML e CSS.
Visualizador de Breakpoints
Visualize breakpoints CSS do Tailwind, Bootstrap e frameworks personalizados.
Conversor de Design Tokens
Converta design tokens entre JSON, variáveis CSS e formatos SCSS.
Paleta de Cores para Wireframes
Gere paletas de cores neutras para wireframes e protótipos.
Gerador de Cursor CSS
Explore todos os tipos de cursor CSS com preview ao vivo e código pronto para copiar.
Referência de Tamanhos de Ícones
Tamanhos padrão de ícones para iOS, Android, Web e aplicativos desktop.
Gerador de CSS Grid
Construa layouts CSS Grid visualmente e copie o código CSS gerado.
Gerador de Esquema de Cores
Gere esquemas de cores complementares, triádicos e análogos a partir de uma cor base.
Visualizador de Border Radius
Previsualise e compare valores de CSS border-radius em tempo real.
Gerador de Gradiente Mesh
Gera fundos de gradiente mesh CSS suaves com múltiplos pontos de cor.
Gerador de Tons de Opacidade
Gera uma paleta completa de tons a partir de qualquer cor com variações de opacidade.
Gerador de Espaçamento de Letras
Visualize e gere CSS letter-spacing e word-spacing para tipografia.
Gerador de temporização de animação
Gerador de temporização de animação CSS (cubic-bezier) com visualização de curva.
Gerenciador de Z-Index
Visualizador de contexto de empilhamento CSS z-index.
Gerador de Scroll Snap CSS
Gere propriedades CSS de scroll-snap com prévia ao vivo e código pronto para copiar.
Gerador CSS Clip-Path
Crie formas CSS clip-path — polígono, círculo e elipse — com editor visual e prévia.
Gerador de Filtros CSS
Ajuste efeitos de filtros CSS (blur, brightness, contrast, etc.) com pré-visualização ao vivo e copie o CSS.
Gerador de Flexbox
Gere código de layout CSS flexbox com editor visual e pré-visualização ao vivo.