Ferramentas CSS para criar, ajustar e copiar — sem sair do navegador
Gere Flexbox, Grid, sombras, gradientes, glassmorphism, animações e muito mais com pré-visualização instantânea. Ajuste os controles, veja o resultado ao vivo e copie o CSS pronto.
Categorias
Encontre a ferramenta certa pelo tipo de problema que você precisa resolver.
Layout
Flexbox, Grid e sistemas de posicionamento
4 ferramentasEfeitos & Visual
Sombras, gradientes, glass e neumorphism
10 ferramentasAnimação & Interação
Keyframes, transitions, transform e loaders
5 ferramentasComponentes
Botões, cards, scrollbar e tabelas
4 ferramentasCores
Paletas, conversão e variáveis CSS
3 ferramentasResponsividade
Media queries e breakpoints
1 ferramentasFerramentas em destaque
As mais usadas por quem constrói interfaces no dia a dia.
Gerador de Flexbox
Monte layouts flexíveis visualmente e copie o CSS de flex-direction, justify-content e align-items.
Gerador de CSS Grid
Crie grades com colunas, linhas, gap e áreas nomeadas com pré-visualização instantânea.
Gerador de Layout Responsivo
Defina um grid que se adapta automaticamente ao tamanho do container com auto-fit e minmax.
Gerador de Border Radius
Ajuste os 4 cantos individualmente e veja formas orgânicas em tempo real.
Gerador de Box Shadow
Combine múltiplas camadas de sombra para profundidade realista, inclusive sombras internas.
Gerador de Gradientes
Gradientes lineares, radiais e cônicos com múltiplos stops de cor.
Gerador de Glassmorphism
Efeito de vidro fosco com backdrop-filter, transparência e bordas sutis.
Gerador de Neumorphism
Superfícies suaves com sombras duplas — o mesmo estilo usado neste site.
Gerador de Animações (@keyframes)
Escolha um preset de animação, ajuste duração e timing, e copie o @keyframes pronto.
Do zero à publicação, sem trocar de aba
Ajuste, copie o CSS e cole direto no seu projeto. Todas as ferramentas rodam localmente no seu navegador — nada é enviado para nenhum servidor.
Do blog
Tutoriais e guias de CSS moderno.
Guia completo de CSS Grid em 2026
Do grid-template-columns às áreas nomeadas: um passeio prático pelo sistema de grid mais poderoso do CSS.
LayoutFlexbox na prática: 8 padrões de layout que você vai usar sempre
Barra de navegação, cards de altura igual, centralização perfeita — os padrões de flexbox mais úteis do dia a dia.
AcessibilidadeCSS e acessibilidade: o que todo front-end deveria saber
Contraste, foco visível, prefers-reduced-motion e outras propriedades que tornam sua interface utilizável por todos.