Ferramentas de CSS e Design Grátis: Cores e Layouts
Transforme decisões visuais em valores para suas folhas de estilo. Monte uma paleta, confira o contraste, gere um gradiente ou calcule tamanhos fluidos de fonte antes de copiar para o projeto.
Gerador de Paleta de Cores
Crie, personalize e exporte belas paletas de cores para seus projetos de design
Gerador de Gradiente CSS
Crie gradientes CSS bonitos com visualização ao vivo
Gerador de Box Shadow
Crie sombras CSS com editor visual
Conversor de Cores
Converta cores entre formatos HEX, RGB, HSL, HSV e CMYK
Verificador de Contraste de Cores
Verifique as taxas de contraste de cores para conformidade com WCAG
Seletor de Cores
Selecione cores de uma paleta visual
Gerador CSS Grid
Construtor visual de layout CSS Grid
Playground Flexbox
Visualizador interativo de CSS Flexbox
Gerador de Sombra de Texto
Crie efeitos de sombra de texto CSS
Gerador de Border Radius
Editor visual de border-radius
Gerador Glassmorphism
Crie efeitos CSS de vidro fosco
Gerador de Texto Gradiente
Crie texto com gradiente colorido em CSS
Gerador de Animação CSS
Crie animações CSS keyframe visualmente
Gerador de Favicon
Gere favicons a partir de texto ou imagens
Gerador de Imagem OG
Crie imagens Open Graph para compartilhamento social
Sugestor de Pares de Fontes
Encontre combinações perfeitas de fontes
Gerador de Cores Tailwind
Gere escalas de cores customizadas para Tailwind CSS
Conversor Pixel para REM
Converta entre unidades px e rem
Conversor Em para Px
Converta unidades CSS em, rem e px instantaneamente
Calculadora CSS Clamp
Gere valores CSS clamp() para tipografia e espaçamento fluido e responsivo
Escolha pelo que você precisa fazer
- Comece pela paleta e confira o contraste entre o texto e o fundo.
- Use a calculadora CSS clamp para definir limites de tamanho de fontes responsivas.
- Monte sombras, bordas e gradientes e confira o resultado com seu conteúdo real.