Ferramentas de Design
Paletas de cores, ferramentas de tipografia, calculadoras de espaçamento e utilitários de design UI.
Tailwind Color Reference
Browse all Tailwind CSS color palettes with hex and RGB values.
Spacing Scale Generator
Generate consistent spacing scales for your design system.
Font Pairing Guide
Discover harmonious font combinations for headings and body text.
Line Height Calculator
Calculate optimal line height for readable typography.
Data URL Encoder
Convert files to base64 Data URLs for embedding in HTML and 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.