Todas as ferramentas
27 geradores de CSS gratuitos, organizados por categoria. Ajuste, visualize e copie o código pronto.
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 Aspect Ratio
Mantenha proporções de imagens e vídeos com a propriedade aspect-ratio.
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 Text Shadow
Crie sombras, contornos e efeitos neon em texto com múltiplas camadas.
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 Filtros CSS
Combine blur, brightness, contrast, saturate, grayscale, sepia e hue-rotate.
Gerador de Máscaras CSS
Use mask-image com gradientes para criar transições de opacidade e recortes suaves.
Gerador de Shapes CSS
Formas prontas — triângulos, hexágonos, estrelas — geradas com clip-path.
Gerador de Clip-path
Recorte elementos com polígonos e formas personalizadas usando clip-path.
Gerador de Animações (@keyframes)
Escolha um preset de animação, ajuste duração e timing, e copie o @keyframes pronto.
Gerador de Transform
Combine translate, rotate, scale e skew num único transform.
Gerador de Transitions
Configure propriedade, duração, easing e delay para transições suaves.
Gerador de Hover Effects
Efeitos de hover prontos — elevação, brilho, borda animada — para aplicar em qualquer elemento.
Gerador de Loaders CSS
Spinners, dots e barras de carregamento feitos 100% em CSS puro.
Gerador de Botões CSS
Botões com preenchimento, sombra, borda e cantos arredondados prontos para o seu design system.
Gerador de Cards
Cards com sombra, borda, raio e espaçamento configuráveis para listagens e dashboards.
Gerador de Scrollbar Personalizada
Personalize cor, largura e cantos da barra de rolagem do navegador.
Gerador de Tabelas Responsivas
Tabelas que viram cards empilhados no mobile, sem JavaScript.
Gerador de Paleta de Cores
Gere paletas harmônicas — complementar, análoga, tríade — a partir de uma cor base.
Conversor de Cores
Converta entre HEX, RGB e HSL instantaneamente, nos dois sentidos.
Gerador de Variáveis CSS
Monte um design token de cores em custom properties (--var) prontas para :root.
Gerador de Media Queries
Defina breakpoints e visualize como o layout se comporta em cada largura de tela.