Geradores de CSS gratuitos
Geradores visuais de código CSS com pré-visualização ao vivo. Ajuste os parâmetros e copie CSS pronto para produção instantaneamente.
Todos os geradores CSS
Gerador de gradiente CSS
Crie belos gradientes CSS lineares e radiais visualmente.
Gerador CSS Box Shadow
Construa belas sombras de caixa visualmente e copie o CSS.
Gerador CSS Text Shadow
Construa efeitos de sombra de texto visualmente e copie o CSS.
Gerador CSS Border Radius
Crie visualmente cantos arredondados e copie o CSS.
Gerador de caminhos de recorte CSS
Escolha uma predefinição de forma, ajuste os controles deslizantes e copie o código clip-path do CSS.
Gerador de Glassmorphism CSS
Crie efeitos modernos de vidro fosco com visualização ao vivo. Personalize e copie o código CSS.
Gerador de bézier cúbico CSS
Arraste os pontos de controle para criar funções de easing CSS personalizadas. Visualize animação e copie o código.
Gerador de triângulos CSS
Crie triângulos CSS puros usando o truque de borda. Escolha direção, tamanho e cor.
Carregador de CSS / Gerador de Spinner
Escolha uma animação de carregamento, personalize cores e velocidade e copie o código CSS puro.
Gerador de padrões CSS
Gere padrões de fundo CSS repetidos usando gradientes CSS puros. Escolha um padrão, personalize e copie.
Conversor gratuito de PX para REM
Converta pixels para rem e vice-versa com um tamanho de fonte base configurável.
Minificador de CSS
Comprima código CSS removendo comentários, espaço em branco e otimizando valores.
Gerador de animação CSS
Construa animações CSS @keyframes visualmente - escolha uma predefinição ou personalize timing, transformações e easing. Copie código pronto para produção.
Visualizador de modelo de caixa CSS
Ajuste margens, bordas, preenchimento e dimensões de conteúdo e veja o modelo de caixa CSS ao vivo.
Gerador de várias colunas CSS
Crie layouts de texto multi-coluna estilo jornal com visualização ao vivo. Ajuste colunas, espaço, estilo de regra e largura.
Gerador de filtros CSS
Ajuste propriedades de filtro CSS com controles deslizantes e veja o resultado em tempo real. Copie o código gerado.
Gerador de traços de texto CSS
Crie efeitos de texto delineado e traçado com visualização ao vivo e código CSS pronto para cópia.
Gerador de borda gradiente CSS
Crie belas bordas de gradiente usando a propriedade border-image. Ajuste cores, largura, raio e ângulo e copie o CSS.
Gerador de CSS Flexbox
Construa layouts flexbox visualmente - ajuste propriedades de contêiner e item, veja visualização ao vivo, copie o CSS.
Gerador de gradiente de texto CSS
Crie belos efeitos de texto com gradiente. Ajuste cores, ângulo e visualize texto, depois copie o CSS.
Gerador de grade CSS
Construa layouts CSS Grid visualmente - defina colunas, linhas, espaço e alinhamento, veja visualização ao vivo, copie o CSS.
Conversor de unidades CSS
Converta entre px, rem, em, vw, vh, pt, cm, mm, in e % com contexto configurável.
Sobre nossos geradores CSS
O Absolutool inclui 12 geradores CSS visuais com prévia ao vivo e código pronto para copiar. Cada gerador permite ajustar valores com sliders, alças de arrastar ou controles, e ver o resultado instantaneamente · não é necessário saber CSS. Quando estiver satisfeito com o visual, copie o código com um clique.
Nossas ferramentas CSS cobrem as propriedades mais procuradas: gradientes (lineares e radiais), sombras de caixa e sombras de texto, border-radius, clip paths (polígono, círculo, elipse), glassmorphism, curvas de Bézier cúbicas para animações, triângulos em CSS puro, spinners de carregamento, padrões de fundo e conversão de unidades. Perfeito tanto para iniciantes aprendendo CSS quanto para desenvolvedores experientes que querem ajustar visualmente seus estilos.
Por que os geradores visuais de CSS importam
Escrever CSS à mão para propriedades como linear-gradient(135deg, #667eea 0%, #764ba2 100%), box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) ou clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) exige conhecer a sintaxe de cor e imaginar o resultado visual antes de poder vê-lo. Os geradores visuais invertem essa ordem: arraste um controle deslizante, escolha uma cor, observe a pré-visualização se atualizar e depois copie o código gerado. As ferramentas desta categoria produzem um CSS conforme aos padrões que funciona em todos os navegadores lançados nos últimos cinco anos, sem sintaxe proprietária nem pré-processador necessário.
Cada gerador deste site é uma única página HTML com um painel de pré-visualização ao vivo e um conjunto de controles. À medida que você ajusta os valores, a pré-visualização é renderizada de novo em tempo real usando o CSS real que o gerador vai copiar. Não há um motor de renderização proprietário fingindo ser CSS; o que você vê é exatamente o que seus usuários verão. O código gerado usa sintaxe moderna (propriedades personalizadas de CSS quando cabível, propriedades lógicas para suporte a RTL, OKLCH para as ferramentas de cor mais recentes), mas recorre com elegância a alternativas quando você precisa de suporte a navegadores antigos: dá para reduzir um único ajuste por ferramenta para passar a uma variante amigável ao que é antigo.
Compatibilidade de navegadores e prefixos de fornecedor
As especificações de CSS têm sido notavelmente estáveis desde 2018: gradientes, transformações, sombras, animações, flexbox, grid e clip-path funcionam todos sem prefixos em todos os principais navegadores (Chrome, Firefox, Safari, Edge). O punhado de propriedades que ainda precisam de prefixos são, em sua maioria, experimentais (a subgrade de CSS em Safaris antigos, as animações guiadas pela rolagem). Os geradores emitem por padrão CSS padrão sem prefixos que você pode colar diretamente numa folha de estilos. O backdrop-filter (usado no gerador de glassmorfismo) foi o último retardatário comum, mas chegou à versão estável do Firefox 103 (julho de 2022) e o Safari o suporta via -webkit-backdrop-filter há anos. Projetos modernos raramente precisam de autoprefixer para as propriedades que essas ferramentas cobrem.
Se o seu alvo é o Internet Explorer 11 (um público em extinção, mas real para algumas intranets corporativas), a maioria das propriedades daqui não tem suporte. O gerador de grid recorre com elegância a alternativas porque o IE11 suporta uma sintaxe de grid mais antiga, próxima o suficiente para layouts simples, mas recursos avançados como subgrid ou gap não serão renderizados. Para públicos modernos, a regra geral é «use a sintaxe padrão que essas ferramentas produzem, dispense os prefixos e aceite que o pequeníssimo público de IE restante verá um layout simplificado». O caniuse.com continua sendo a referência canônica para qualquer propriedade da qual você não tenha certeza.
Considerações de desempenho
Os efeitos visuais podem virar armadilhas de desempenho rapidamente. Uma sombra de várias camadas é pintada uma vez por quadro, o que é barato; um filter: blur(20px) num cabeçalho fixo força um repintar a cada evento de rolagem e derruba a taxa de quadros no celular. A ferramenta de Bézier cúbica ajuda você a afinar as curvas de animação para que pareçam certas; combiná-la com will-change: transform no elemento animado mantém o navegador pronto para compor a animação na GPU em vez de repintar a página. A regra geral: anime transform e opacity; todo o resto (largura, altura, top, left, cor) dispara layout ou pintura e deve ser usado com parcimônia nas animações.
O gerador de glassmorfismo é o mais pesado dos efeitos visuais daqui porque o backdrop-filter: blur(20px) obriga o navegador a capturar o fundo, desfocá-lo e recompor a cada quadro em que o elemento de vidro estiver visível. Num computador com placa de vídeo dedicada isso é invisível; num celular intermediário pode baixar a taxa de quadros de 60 para 30 por segundo. O gerador de padrões CSS produz padrões baseados em SVG cujo custo é desprezível. Os carregadores e as animações continuam fluidos enquanto animarem transform/opacity. Se o seu design empilha três ou mais camadas de desfoque, teste num celular intermediário antes de publicar; a diferença entre «elegante» e «travado» pode ser uma única camada a mais.
O CSS nos sistemas de design
Os sistemas de design modernos expressam as cores, os espaçamentos e as elevações como propriedades personalizadas (variáveis CSS) e depois constroem os estilos dos componentes por cima. Os geradores daqui produzem valores diretos para você colar tal e qual num componente, mas são igualmente úteis para colher tokens do sistema: copie três ou quatro sombras de profundidade crescente para os seus tokens --shadow-sm, --shadow-md, --shadow-lg; copie dois gradientes para --bg-primary e --bg-secondary; copie uma sequência de valores de border-radius para --radius-sm e companhia. O gerador ajuda você a tomar essas decisões de forma visual em vez de adivinhar os números e recarregar a página.
O gerador de CSS Grid emite grid-template-columns e grid-template-rows com linhas nomeadas, que é o que você quer para um sistema. O gerador de Flexbox faz o mesmo para os layouts flex. Ambos produzem código que você pode envolver numa classe ou num componente do Tailwind tal e qual. Para projetos que usam o Tailwind, os valores costumam se traduzir diretamente: um espaço de 1rem vira gap-4, um raio de borda de 0.5rem vira rounded-md. Para projetos sem Tailwind, as variáveis CSS em bruto costumam ser exatamente o que você quereria no arquivo do sistema de design. O passo de seleção visual é a parte que você não consegue automatizar com facilidade.
Perguntas frequentes
Esses geradores de CSS funcionam em navegadores antigos?
A sintaxe padrão que eles emitem é compatível com todos os navegadores lançados desde 2019, o que cobre mais de 97% dos usuários mundiais segundo os dados do StatCounter e do caniuse. Para o Internet Explorer 11 (cerca de 0,5% do tráfego mundial, sobretudo usuários de intranets corporativas) a maioria dos recursos não será renderizada. O Safari moderno suporta o backdrop-filter via prefixo -webkit-, que a ferramenta de glassmorfismo emite ao lado da propriedade padrão.
Por que meu gradiente aparece com faixas?
A cor de 8 bits (256 níveis por canal) não consegue representar a mescla suave entre duas cores próximas ao longo de uma distância grande: você verá «faixas» visíveis numa tela calibrada. Soluções: estique menos o gradiente, adicione um terceiro ponto de cor para quebrar a faixa, aplique pontilhado ao gradiente com um filtro de ruído SVG, ou use a interpolação de gradiente OKLCH (compatível com Chrome e Safari) que interpola num espaço perceptualmente uniforme.
Devo usar keyframes de CSS ou transições?
As transições servem para ir de um estado a outro (ao passar o cursor, ao clicar, ao focar); são declarativas e o navegador cuida do resto. Os keyframes servem para animações com vários passos ou uma sequência definida (um indicador de carregamento, uma série de revelações escalonadas). Para uma mudança de estado simples use transições; para qualquer coisa de vários passos use keyframes. Os geradores de Bézier cúbica e de animação deste site cobrem os dois casos.
Como faço um efeito de glassmorfismo ficar bom?
Três ajustes são os que mais importam: um fundo semitransparente (de rgba(255,255,255,0.1) a 0.3), um backdrop-filter: blur() real na faixa de 10 a 30px, e uma borda de 1px a 1,5 vez o alfa do fundo para dar uma aresta ao vidro. Sem os três, fica chapado. O gerador de glassmorfismo deste site ajusta os três juntos e inclui a alternativa do Safari -webkit-backdrop-filter.
Qual é a diferença entre rem, em e px?
O px é um tamanho absoluto: 1px é um pixel de CSS, que o navegador escala para pixels físicos conforme a razão de pixels do dispositivo. O em é relativo ao tamanho da fonte do elemento pai, então 1.5em num filho de um elemento com fonte de 16px é 24px. O rem é relativo ao tamanho da fonte do elemento raiz html, por padrão 16px, mas alterável pelo tamanho da fonte raiz por acessibilidade. Use rem para tamanhos que devem respeitar o zoom e as preferências de tamanho de fonte do navegador do usuário, e px para tamanhos que devem ser invariáveis (bordas de 1px, tamanhos de ícone fixos).
Preciso de um pré-processador de CSS para usar essas ferramentas?
Não. Cada gerador emite CSS padrão que funciona diretamente num arquivo .css. Os pré-processadores (Sass, Less, Stylus) são úteis quando você quer variáveis, aninhamento, mixins ou cálculo em tempo de compilação, mas o CSS moderno agora suporta nativamente as propriedades personalizadas (variáveis), o aninhamento e muitos outros recursos que antes exigiam um pré-processador. A saída dessas ferramentas é independente de pré-processador: cole-a num arquivo Sass ou num arquivo CSS simples igualmente.