Poderosos geradores CSS para box shadows, layouts flexbox, layouts grid e conversões de unidades. Obtenha código CSS e Tailwind instantaneamente. Todo o processamento acontece localmente no seu navegador.
box-shadow: 4px 4px 8px 0px #00000040;Notas de ferramentas é um recurso para Apoiadores.
Escolha entre as abas Box Shadow, Flexbox ou Conversor de Unidades.
Use controles deslizantes e campos de entrada para configurar as propriedades CSS. Veja a pré-visualização ao vivo do resultado.
Copie o código CSS ou Tailwind gerado para a área de transferência.
Experimente configurações predefinidas para padrões comuns e personalize a partir daí.
O gerador de box shadow cria propriedades CSS box-shadow com deslocamento horizontal/vertical, raio de desfoque, espalhamento e cor personalizáveis. Múltiplas camadas podem ser empilhadas para efeitos complexos como cartões elevados ou designs neumórficos. Cada camada suporta cores RGBA com transparência alpha e sombras internas (inset) para efeitos internos. A ferramenta gera tanto CSS padrão quanto valores arbitrários do Tailwind.
Configure propriedades do contêiner flex (flex-direction, justify-content, align-items, flex-wrap, gap) e veja o CSS equivalente e as classes Tailwind em tempo real. O construtor visual mostra como os itens serão organizados com suas configurações. Suporta todas as propriedades modernas de flexbox incluindo direção linha/coluna, alinhamento center/space-between e espaçamento gap introduzido no CSS Grid.
Converta entre unidades absolutas (px, pt) e unidades relativas (rem, em, vw, vh). Usa o tamanho de fonte base especificado (padrão 16px) para cálculos precisos de rem/em. A conversão segue os padrões W3C: 1rem = tamanho de fonte base, 1em = tamanho de fonte pai, 1vw = 1% da largura da viewport. Útil para design responsivo e dimensionamento acessível.
Toda a geração de CSS acontece inteiramente no seu navegador usando JavaScript. Você obtém saída em CSS puro e Tailwind CSS onde aplicável. O código gerado está pronto para produção e pode ser copiado diretamente para suas folhas de estilo. Nenhuma comunicação com servidor ocorre — a ferramenta funciona completamente offline após carregada.
Esta ferramenta gera box shadows (camada única ou múltiplas), layouts flexbox (propriedades de contêiner e item) e converte entre unidades CSS (px, rem, em, %).