Ferramentas e Calculadoras de CSS

gradient Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerarchevron_right layers Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerarchevron_right rounded_corner Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerarchevron_right text_format Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerarchevron_right border_style Gerador de Borda CSS Desenhe uma borda visualmente — espessura, estilo (solid, dashed, dotted, double…), cor e raio — com pré-visualização em tempo real. Gerarchevron_right blur_on Gerador de Glassmorphism CSS Crie um efeito de vidro (glassmorphism) com pré-visualização ao vivo — ajuste desfoque, transparência, tom e borda, depois copie o CSS. Gerarchevron_right swap_vert Gerador de Scrollbar CSS Crie uma barra de rolagem colorida personalizada com pré-visualização ao vivo e copie o CSS — compatível com WebKit e Firefox. Gerarchevron_right transform Gerador de Transform CSS Combine rotate, scale, translate e skew visualmente e copie o CSS transform resultante. Gerarchevron_right speed Gerador de Transition CSS Crie uma transition — propriedade, duração, função de temporização e atraso — e teste ao vivo com um clique. Gerarchevron_right photo_filter Gerador de Filtros CSS Combine blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia e invert com pré-visualização em tempo real. Gerarchevron_right animation Gerador de Animações CSS Escolha uma predefinição de keyframes — rotação, pulso, quique, tremor, esmaecimento, deslizamento — ajuste a duração e as repetições, copie @keyframes + a classe. Gerarchevron_right view_column Playground de CSS Flexbox Ajuste flex-direction, justify-content, align-items, wrap e gap em caixas ao vivo, depois copie o CSS do container. Usarchevron_right mouse Seletor de Cursores CSS Passe o mouse sobre cada valor de CSS cursor para testá-lo ao vivo, clique para copiar a declaração. Usarchevron_right view_week Gerador de Colunas CSS Distribua o texto em colunas estilo jornal — número, espaçamento e linha divisória — com pré-visualização em tempo real e CSS. Gerarchevron_right format_size Gerador de Escala Tipográfica Crie uma escala tipográfica modular a partir de um tamanho base e uma proporção — pré-visualização ao vivo, tabela px/rem e variáveis CSS prontas para copiar. Gerarchevron_right text_fields Calculadora de Tipografia Fluida — CSS clamp() Gera um CSS clamp() que escala o tamanho da fonte suavemente entre duas larguras de viewport — sem necessidade de breakpoints. Calcularchevron_right view_column Calculadora de Colunas de Grid Larguras de coluna para qualquer container, número de colunas e espaçamento — com código CSS grid pronto para copiar e tamanhos de span multi-coluna. Calcularchevron_right