Ferramentas CSS e design
Geradores visuais e calculadoras para devs front-end e Webflow.
localCalculadora de braçadeirasDigite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de…localGerador de Animação Hover CSSCrie animações hover para botões, cards, links e ícones. Escolha um efeito, teste em diferentes elementos…localGerador de Keyframes CSSUm editor visual para @keyframes. Adicione keyframes na linha do tempo, defina transformações, opacidade,…localGerador de Animação CSSCrie animações CSS em uma linha do tempo de keyframes real. Comece com mais de 50 presets, navegue quadro…localGerador de Cubic BezierModele uma curva de easing arrastando duas alças e compare com os easings padrão. Precisa de física? Mude…localGerador de Loader CSSEscolha entre 13 spinners de carregamento em CSS puro, ajuste tamanho, cores, espessura e velocidade e…localGerador de Gradiente CSSMonte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma…localGerador de Box ShadowEmpilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao…localConversor PX para REMConverta entre pixels, rem e em usando o tamanho de fonte raiz do seu projeto — ou cole uma folha de…localConversor de SVG para JSXCole um SVG do Figma, do Illustrator ou de um conjunto de ícones e receba um componente React (JSX ou TSX)…localSVG para CSSCole um SVG e receba uma data URI compacta, codificada em URL, além de regras background-image e…localGerador de CSS GridDefina as colunas, linhas e o espaçamento (gap), depois arraste sobre as células para criar áreas como…localGerador de Border RadiusArredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada…localGerador de Filtro CSSAjuste blur, brilho, contraste, saturação, matiz, escala de cinza, sépia, inversão e sombra projetada em…localGerador de Clip-path CSSRecorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono,…localGerador de Máscara CSSFaça imagens e seções desaparecerem gradualmente em vez de terminarem de forma abrupta: esmaeça uma borda,…localGerador de Triângulo CSSCrie um triângulo só com CSS para a seta de um tooltip, o caret de um dropdown ou um balão de fala:…localGerador de Blob SVGCrie formas blob orgânicas e suaves para fundos de seções de destaque, avatares e ilustrações. Defina a…localGerador de Ondas SVGCrie divisores ondulados de seção para landing pages: adicione ou remova ondas (até 6, cada uma com cor,…localGerador de Flexbox CSSVeja exatamente o que cada propriedade flexbox faz: defina a direção, a quebra de linha, o…localGerador de Escala TipográficaEscolha um tamanho base da fonte e uma razão — Terça Menor, Terça Maior, Quarta Justa, Proporção Áurea — e…localGerador de Padrões SVGDê um toque de textura sutil a seções e cards com padrões SVG sem emendas: bolinhas, grades, linhas…localGerador de Botão CSSCrie um botão que fica ótimo em todos os estados. Comece com um preset — sólido, contorno, ghost, pill,…localEfeito Fade nas Bordas de Imagem com CSSDê às fotos e imagens de destaque bordas suaves e esmaecidas com uma única regra CSS — sem editar a…localGerador de Vinheta CSSAdicione uma vinheta — um esmaecimento suave e arredondado nas bordas — a fotos, cards e seções hero com…localMáscara de Forma em ImagemColoque qualquer foto dentro de uma forma — estrela, coração, hexágono, círculo, seta, balão de fala… —…localGerador de Divisor de SeçãoDê às seções da landing page bordas angulares, curvas, em seta, ondas, zigue-zague ou festonadas com uma…localSeção Angulada CSSCrie seções angulares, inclinadas ou diagonais — aquele visual clássico de landing page — com uma única…localDivisor Curvo de SeçãoArredonde a borda de um hero ou seção com uma curva — convexa, côncava, um ângulo curvo, uma onda suave ou…localGerador de Borda Zigzag CSSRecorte uma borda zigzag, dente de serra, festonada ou em degraus em seções, cards, cupons e recibos.…localGerador de Animação de PartículasAdicione neve caindo, chuva, estrelas cadentes, confete, pétalas, folhas de outono, corações ou bolhas…localEfeito de Neve CSSDeixe a neve cair no seu site nas festas de fim de ano: neve suave ou flocos de neve, uma nevasca leve ou…localAnimação de Chuva CSSFaça chover em uma página ou seção de destaque, de uma leve garoa a um temporal inclinado. As gotas se…localAnimação de Estrelas CadentesFaça estrelas cadentes riscarem o céu noturno da sua seção principal, ou deixe formas de estrela descerem…localConfete Animado CSSComemore um lançamento, um cadastro ou um aniversário com confete caindo que balança e gira em cores…localConversor CSS para TailwindCole regras ou declarações CSS e receba as classes utilitárias do Tailwind equivalentes para cada seletor…localGerador de GlassmorphismMonte um card de vidro fosco com sliders em tempo real e copie o CSS compatível com todos os navegadores —…localGerador de Valores Arbitrários TailwindCole seu CSS e acerte a sintaxe de colchetes do Tailwind de primeira — espaços viram underscores, dicas de…localEscalar SVG ViewBoxNormalize ícones para um novo viewBox (por exemplo, 24×24) reescalando as coordenadas reais dentro de cada…localLocalizador de ícones SVGPesquise mais de 70.000 ícones SVG de código aberto — Lucide, Tabler, Heroicons, Phosphor, Bootstrap,…localSCSS para CSSCole SCSS ou Sass indentado e receba CSS puro, compilado pelo motor oficial Dart Sass no seu navegador,…localCompilador LESS para CSSCole seu código Less e receba CSS puro, compilado pelo motor oficial Less.js direto no seu navegador.…localConversor HTML para JSXCole HTML — um trecho, um template ou um ícone SVG — e receba JSX pronto para usar em um componente React:…localGerador de Slider e CarrosselConfigure um carrossel com cliques, sem precisar ler a documentação: escolha uma biblioteca, defina…localGerador de Slider SwiperConfigure o Swiper 11 com um editor visual — breakpoints responsivos, efeitos, autoplay, tipos de…localGerador de Slider SplideMonte um carrossel Splide acessível e leve sem ler a documentação: defina as opções, veja a prévia em três…localGerador de Slider Glide.jsCrie um carrossel Glide.js mínimo — o slider de ~7 KB, sem dependências — com breakpoints responsivos,…localGerador Slick SliderConfigure o carrossel clássico jQuery Slick: responsivo, centro, fade, autoplay, setas e bolinhas. Copie o…
Falta alguma ferramenta de CSS?
Diga o que você precisa — criamos primeiro as ferramentas mais pedidas, de graça.