Gerador de animações de carregamento CSS
CSS Loader Generator
264 modelos de carregamento: 24 geometrias × 11 movimentos; filtre por categoria e veja a animação.
Design
Prototipe sistemas de CSS e cores com prévias ao vivo e código pronto para copiar.
Ferramentas
17 ferramentas
Gerador de caixas de seleção CSS
CSS Checkbox Generator
24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.
Gerador de interruptores CSS
CSS Switch Generator
18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.
Gerador de clip-path CSS
CSS Clip Path Generator
24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.
Gerador de padrões de fundo CSS
CSS Background Pattern Generator
64 padrões de fundo: 16 geometrias × quatro arranjos; ajuste cores e tamanho do mosaico.
Gerador de cubic-bezier CSS
CSS Cubic Bezier Generator
Oito curvas prontas, quatro coordenadas Bézier e prévia animada do ritmo.
Gerador de glassmorphism CSS
CSS Glassmorphism Generator
Ajuste tom do vidro, desfoque, saturação, opacidade, raio e opacidade da borda. Altere fundo e texto da prévia; a largura da borda e a sombra exportadas são fixas.
Gerador de efeito glitch de texto CSS
CSS Text Glitch Effect Generator
Ajuste texto, tamanho, cores deslocadas, tremor e duração; o CSS respeita movimento reduzido.
Gerador de gradientes CSS
CSS Gradient Generator
Gradientes lineares ou radiais com 2–16 pontos; adicione, remova, inverta ou sorteie cores.
Gerador de triângulos CSS
CSS Triangle Generator
Oito direções de triângulo, incluindo diagonais; ajuste medidas e exporte HTML e CSS correspondentes.
Gerador de sombras CSS
CSS Box Shadow Generator
Uma a oito sombras com deslocamento, desfoque, expansão, cor, opacidade e inset independentes.
Gerador de border-radius CSS
CSS Border Radius Generator
Oito raios horizontais e verticais; exporte cantos elípticos como CSS pronto para copiar.
Gerador de harmonias de cores
Color Harmony Builder
Monte paletas de cinco cores a partir de uma semente com regras fixas — análogas, complementares, tríades — e selos de contraste em cada amostra.
HEX para RGBA
HEX to RGBA Converter
Converta #RGB, #RGBA, #RRGGBB e #RRGGBBAA em rgba() com decodificação exata do alfa, amostra ao vivo e resultado pronto para copiar.
RGBA para HEX
RGBA to HEX Converter
Converta valores rgb() e rgba() em #RRGGBB ou #RRGGBBAA com revisão canal a canal e arredondamento exato do alfa, localmente.
Gerador de variações de cor
Color Shades Generator
Passos separados para escurecer e clarear; veja HEX, RGBA, HSL e copie toda a paleta.
Misturador de cores
Color Mixer
Escolha a quantidade de cores intermediárias; misture extremos com alfa e copie a paleta.
Ajuste o sistema e mantenha a saída explícita.
Defina a geometria
Controle espaçamento, raios, padrões e formas com valores mensuráveis.
Abrir uma ferramenta correspondenteConstrua a lógica de cores
Misture, converta e compare cores com o resultado à vista.
Abrir uma ferramenta correspondenteLeve o código com você
Copie o CSS e os tokens gerados sem reconstruir o design.
Abrir uma ferramenta correspondenteNavegador primeiro, por design.
Navegador primeiro
Abra a tarefa. Sem pacotes de utilitários ou contas.
Processamento visível
Veja entrada, resultado, estado e etiqueta de execução em cada etapa.
Pronto para exportar
Copie ou baixe o resultado útil sem trabalho de limpeza.
Categorias relacionadas
Continue o fluxo com outra coleção focada.
Torne reproduzível cada escolha visual.
Use restrições deliberadas
Comece por uma regra de espaçamento, escala ou geometria, não por valores arbitrários.
Verifique o contraste em contexto
Julgue as cores na superfície e no tamanho de texto onde vão viver.
Leia o CSS gerado
Confirme suporte de navegadores e valores antes de levar a saída à produção.
Perguntas antes de começar?
Quais ferramentas desta página rodam localmente?
Todas as ferramentas listadas atualmente processam a entrada ativa no seu navegador, sem enviá-la. Qualquer processamento futuro em nuvem ou híbrido será informado antes do uso.
Uma transformação vai alterar minha origem?
O Toolars trabalha sobre uma cópia separada no navegador. Seu arquivo ou texto original permanece inalterado, a menos que você mesmo baixe e substitua.
Posso salvar uma ferramenta?
Sim. Entre primeiro para que o Toolars salve o favorito na sua conta e devolva você à ferramenta.
Como informo um resultado incorreto?
Cada página de ferramenta inclui um canal para relatar problemas. O feedback enviado contém apenas a mensagem e o contexto de página que você escolher.
Falta algum utilitário nesta coleção?
Conte-nos a entrada, a transformação e o resultado que você espera.