O dia a dia do front-end é cheio de micro-tarefas relacionadas a CSS: formatar uma folha de estilos legada, ajustar uma box-shadow para que se pareça com o design do Figma, gerar uma paleta acessível a partir de uma cor de marca, calcular o gradiente exato do mockup, ou construir uma keyframe animation sem lembrar a sintaxe. Este Hub reúne todos os utilitários CSS do Ai2Done para você ter à mão, de uma vez por todas.
As ferramentas se dividem em quatro grupos: Formato (CSS Beautifier, CSS Minifier, validador e deduplicador de regras), Cor (CSS Color Picker, gerador de paletas acessíveis, conversor entre HEX / RGB / HSL / OKLCH), Efeitos (Box Shadow Generator, Text Shadow Generator, Gradient Generator, Border Radius Generator) e Animações (Keyframe Generator, Transition Generator, Cubic Bezier Editor). Cada ferramenta produz código copiável e compatível com todos os navegadores modernos.
Pequeno detalhe que faz a diferença: todas as ferramentas de efeito incluem uma prévia ao vivo. Você move os sliders e vê o resultado instantaneamente em um elemento de amostra, sem abrir DevTools nem recarregar seu app local. A paleta de cores considera o contraste WCAG e avisa quando uma combinação não atende a AA ou AAA, algo que muitas ferramentas online ignoram e que é crítico para sites acessíveis.
Os conversores HEX ↔ RGB ↔ HSL ↔ OKLCH foram pensados para 2026: OKLCH se tornou o padrão de facto para color management em sistemas de design modernos (Tailwind 4, Open Props, Stripe Design System) e os conversores produzem valores exatos, não aproximações. Se seu time ainda trabalha em HEX, as ferramentas também produzem variáveis CSS customizadas prontas para colar.
Combine com o Hub Dev Tools para tarefas mais gerais de programação, com o Hub AI Writing se precisar que a IA te ajude a gerar texto para um componente, ou com o Hub Image Editor se precisar extrair cores de uma imagem para construir sua paleta.