Ferramentas de design
14 ferramentasEscolha cores, crie efeitos CSS, confira o contraste e crie recursos visuais.
- Gerador de gradientes CSSCrie belos gradientes CSS com prévia
- Gerador de sombra de caixaGere propriedades CSS box-shadow
- Gerador de raio de bordaCrie propriedades CSS border-radius
- Gerador de assinaturasCrie imagens de assinaturas manuscritas com 30 fontes ou desenhando
- Criador de barras de progressoCrie barras de progresso animadas
- Criador de marcas d'águaAdicione marcas d'água de texto ou logotipo a imagens para proteção
- Verificador de contraste WCAGVerifique as taxas de contraste de cores para conformidade com a acessibilidade WCAG AA e AAA
- Gerador de faviconCrie favicons a partir de texto, emojis ou imagens para seu site
- Criador de colagens de fotosCrie belas colagens de fotos com vários layouts
- Seletor de cores e gerador de paletasSelecione cores e gere paletas de cores
- RGB para HEX para HSLConverta entre os formatos de cores RGB, HEX e HSL
- Gerador de animações CSSCrie animações CSS com keyframes usando um editor visual de linha do tempo
- Área de testes CSS FlexboxÁrea de testes interativa para aprender e gerar layouts Flexbox
- Gerador de CSS GridCriador visual de layouts CSS Grid com geração de código
Crie e confira detalhes visuais
Crie cores, efeitos CSS, trechos de layout e pequenos recursos visuais para um projeto. Visualizar um efeito ajuda na escolha, mas o resultado final depende do design ao redor, da viewport e do conteúdo. Confira o contraste e o comportamento responsivo, além da aparência de cada elemento isolado.
Da escolha visual ao resultado utilizável
O Gerador de gradientes CSS cria estilos de gradiente, o Seletor de cores e gerador de paletas ajuda a escolher uma paleta e o Verificador de contraste WCAG compara as cores de texto e de fundo. Teste o resultado com os tamanhos de texto e os estados reais.
Perguntas comuns
Uma taxa de contraste aprovada torna uma página totalmente acessível?
Não. O contraste é uma verificação. Navegação por teclado, rótulos, visibilidade do foco, estrutura do documento e outros requisitos de acessibilidade também importam.
Como transformo a prévia de um gradiente em um estilo de site?
O Gerador de gradientes CSS produz uma declaração de gradiente. Aplique-a ao elemento desejado e teste com as dimensões, o texto e o fundo reais usados na página.
Posso comparar duas cores antes de escolhê-las para um texto?
O Verificador de contraste WCAG calcula a taxa de contraste entre as cores de texto e de fundo. Use as cores reais e confira os critérios adequados ao tamanho e ao peso do texto.
Como alterno entre HEX, RGB e HSL?
O RGB para HEX para HSL muda a notação de um valor de cor. A notação descreve a cor; ela não gera uma paleta nem garante um bom contraste automaticamente.