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.
Calculadora de Opacidade HEX
Converta uma cor hexadecimal para hex8 (RRGGBBAA), rgba() e hsla() com opacidade personalizada
Gerador de Borda Gradiente CSS
Gere bordas gradiente CSS com pré-visualização ao vivo. Suporta border-radius usando a técnica background-clip.
Calculadora de PPI
Calcule a densidade de pixels (PPI / pixels por polegada) a partir da resolução e tamanho diagonal da tela
Gerador de Cubic Bezier CSS
Crie funções de easing CSS cubic-bezier() personalizadas com editor visual de curva e prévia de animação
Calculadora Z-Index
Visualize a ordem de empilhamento CSS e resolva conflitos de camadas entre elementos
Gerador de Cubic Bezier CSS
Crie funções de easing cubic-bezier personalizadas para animações e transições CSS
Gerador Neumorfismo CSS
Crie efeitos CSS de soft UI (neumorfismo) com preview ao vivo
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
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.