CSS Generator Suite — Gradientes e Formas

O que é a CSS Generator Suite?

A CSS Generator Suite é uma caixa de ferramentas baseada em navegador que produz CSS e output Tailwind prontos para colar para quinze tarefas de estilização comuns, tudo a partir de uma única interface com abas. Em vez de escrever box shadows, declarações flexbox ou regras glassmorphism à mão e recarregar o navegador para verificar o resultado, você ajusta controles deslizantes e menus suspensos enquanto uma prévia ao vivo é atualizada instantaneamente. O output é renderizado diretamente abaixo de cada painel de controle — um clique o copia para a área de transferência. Cada cálculo é executado inteiramente no seu navegador. Nenhum arquivo é enviado, nenhuma conta é necessária e a ferramenta funciona offline após o carregamento da página.

Os usuários típicos incluem desenvolvedores frontend que querem prototipar stacks de sombras rapidamente, designers que precisam exportar valores cubic-bezier para especificações de motion, e aprendizes que querem entender como as propriedades CSS se combinam observando a prévia mudar em tempo real.

Funcionalidades Principais

• Box Shadow Generator com camadas — Adicione múltiplas camadas de sombra independentes, cada uma com seu próprio offset-X (−50 a 50 px), offset-Y (−50 a 50 px), blur (0–100 px), spread (−50 a 50 px), seletor de cor e alternância inset. A declaração box-shadow gerada combina todas as camadas em um único valor separado por vírgulas.
• Flexbox Layout Builder — Escolha flex-direction (row, row-reverse, column, column-reverse), justify-content (seis valores incluindo space-evenly), align-items (cinco valores), flex-wrap e gap (0–48 px em passos de 4). Quatro caixas de espaço reservado numeradas demonstram o layout ao vivo.
• CSS Grid Template Generator — Edite grid-template-columns e grid-template-rows como strings de texto livre com presets de um clique (repeat(4, 1fr), 200px 1fr, etc.), controle gap, align-items, justify-items e visualize até dezesseis células de grid numeradas.
• Unit Converter (px / rem / em / %) — Insira um valor em qualquer unidade e veja os quatro equivalentes recalculados instantaneamente em relação a um tamanho de fonte base configurável (padrão 16 px). Clique em qualquer cartão de resultado para copiar esse valor com sua unidade anexada.
• Cubic Bezier / Easing Generator — Quatro controles deslizantes controlam P1X, P1Y, P2X, P2Y. Um canvas renderiza a curva bezier com alças de ponto de controle. Dez presets nomeados (ease, ease-in-back, ease-out-cubic, etc.) são aplicados com um único clique. Uma prévia de motion anima um bloco por uma trilha usando a curva atual.
• Clip Path Generator — Suporta formas circle, ellipse, inset e polygon. O editor de polígono vem com seis presets (triangle, diamond, pentagon, hexagon, star, arrow).
• Border Radius Generator — Modo vinculado ou por canto, sintaxe opcional de 8 valores para raios assimétricos e seis presets de forma (Rounded, Pill, Leaf, Drop, Squircle, Message).
• Triangle Generator — Produz o clássico triângulo com truque de borda de largura/altura zero em quatro direções (up, down, left, right) com tamanho e cor ajustáveis.
• Glassmorphism Generator — Controla quantidade de blur, opacidade do fundo, cor do fundo, opacidade da borda, largura da borda, blur de sombra e opacidade de sombra. A prévia renderiza um cartão fosco sobre um fundo de gradiente multi-círculo ao vivo.
• Fluid Typography / Clamp Generator — Defina tamanho de fonte mínimo, máximo, viewport mínimo e máximo. A ferramenta calcula a inclinação de interpolação linear e o intercepto-y, produz um valor clamp() e mostra o tamanho em pixels resolvido em qualquer largura de viewport de prévia.
• Neumorphism Generator — Quatro tipos de forma (flat, concave, convex, pressed) com controles para distance, intensity, blur, border radius, tamanho e cor de fundo.
• Image Filter Generator — Oito funções de filtro CSS: brightness, contrast, saturation, hue-rotate, blur, grayscale, sepia e invert. Faça upload da sua própria imagem ou use o espaço reservado de gradiente integrado. Cinco presets nomeados (Vintage, B&W, Warm, Cool, Dramatic).
• Typography Properties Generator — Define font-size, line-height, letter-spacing, word-spacing, text-transform, text-decoration, font-weight (100–900), font-style, text-shadow (X, Y, blur, color) e cor do texto.
• 3D Transform Generator — Controles deslizantes para rotateX/Y/Z (±180°), translateX/Y/Z (±200 px), perspective (100–2000 px) e scale. Produz perspective, transform e transform-style: preserve-3d.
• Keyframe Animation Builder — Nomeie a animação, escolha uma propriedade CSS em um menu suspenso (transform, opacity, background-color, etc.), defina duration, função de temporização e contagem de iterações. Adicione ou remova paradas de keyframe com posições de percentual personalizadas e valores, depois visualize a animação sendo reproduzida ao vivo.

Como Usar a CSS Generator Suite

Passo 1: Escolher uma Aba de Gerador

Abra a ferramenta em /developer/css/css-generators. A interface abre na aba Box Shadow. A barra de abas ocupa toda a largura do painel e quebra em telas menores. Clique em qualquer aba para trocar de gerador — o estado de cada gerador é preservado enquanto você navega entre abas durante a mesma sessão.

Passo 2: Ajustar os Controles

Cada gerador segue o mesmo padrão: controles de um lado (ou acima), prévia ao vivo abaixo dos controles e um bloco de output CSS na parte inferior.

Para o gerador Box Shadow:

• A sombra padrão começa em offsetX 4 px, offsetY 4 px, blur 8 px, spread 0 px, color #00000040, inset desligado.
• Arraste qualquer controle deslizante e a caixa de prévia branca atualiza sua sombra imediatamente.
• Clique na amostra de cor para abrir o seletor de cor nativo do navegador. O componente adiciona automaticamente 40 (25% de opacidade em hex) à cor selecionada.
• Marque a caixa Inset para virar a sombra para dentro do elemento.
• Clique em "Add Shadow" para introduzir uma segunda camada — cada camada ganha sua própria linha de controles e um botão de lixeira para removê-la (a última camada restante não pode ser removida).

Para o gerador Flexbox, quatro caixas numeradas ilustram o alinhamento atual. Mudar flex-direction para column e justify-content para space-between atualiza suas posições em tempo real.

Passo 3: Ler o CSS Gerado

O bloco de output CSS aparece em uma fonte monoespaçada abaixo dos controles de cada gerador. Para Box Shadow o formato é:

box-shadow: 4px 4px 8px 0px #00000040, inset 2px 2px 4px 0px #ffffff20;

Para o Unit Converter, o output são quatro cartões clicáveis em vez de um bloco de código — clique em qualquer cartão para copiar seu valor (ex.: 1.5rem) diretamente para a área de transferência.

Passo 4: Copiar e Colar

Cada gerador tem um botão Copiar no canto superior direito do cartão de output. Clicar nele escreve a declaração completa na sua área de transferência e dispara uma notificação toast "Copied to clipboard". Você pode colar diretamente na sua folha de estilos ou na configuração do Tailwind.

Passo 5: Usar a Exibição de Fórmula de Fluid Typography

A aba Fluid Typography inclui um cartão de fórmula que expõe a inclinação e o intercepto para que você possa verificar ou documentar os cálculos:

font-size = 16px + (32 - 16) * ((100vw - 320px) / (1200 - 320))
slope = 1.7241vw | intercept = -0.5rem

O output gerado se parece com:

font-size: clamp(1.0000rem, -0.5rem + 1.7241vw, 2.0000rem);

Exemplos Práticos

Sombra de Cartão em Camadas

Um padrão de design comum usa duas camadas de box shadow para simular luz ambiente e direta:

1. Abra a aba Box Shadow.
2. Configure Shadow 1 para offsetX 0, offsetY 2 px, blur 4 px, spread 0, color #00000020, inset desligado.
3. Clique em "Add Shadow". Configure Shadow 2 para offsetX 0, offsetY 8 px, blur 24 px, spread 0, color #00000014, inset desligado.
4. Copie o resultado: box-shadow: 0px 2px 4px 0px #00000020, 0px 8px 24px 0px #00000014;

Tamanho de Fonte de Título Responsivo

Um título de 20 px no mobile (viewport de 320 px) que escala para 48 px no desktop (1440 px):

1. Abra a aba Fluid Typography.
2. Configure o tamanho de fonte mínimo para 20, máximo para 48, viewport mínimo para 320, máximo para 1440.
3. Arraste o controle deslizante de viewport de prévia para verificar tamanhos intermediários.
4. Copie: font-size: clamp(1.25rem, 0.2143rem + 3.2143vw, 3rem);

Cartão Glassmorphism

Para um cartão de notificação de vidro fosco sobre um gradiente escuro:

1. Abra a aba Glassmorphism.
2. Configure a cor de fundo para branco (#ffffff), opacidade para 15%, blur para 16 px, opacidade da borda para 25%, largura da borda para 1 px, blur de sombra para 32 px, opacidade de sombra para 8%.
3. O output inclui o prefixo de vendor -webkit-backdrop-filter automaticamente.

Dicas e Melhores Práticas

Camadas inset do Box Shadow adicionam profundidade a campos de entrada. Use uma pequena sombra inset (inset 0px 2px 4px 0px #0000001a) junto com uma sombra exterior em um cartão para fazer os campos do formulário parecerem encaixados. O gerador permite combinar ambas em uma única declaração de múltiplas camadas.

Para o gerador Fluid Typography, verifique o clamping nos limites. O controle deslizante de viewport de prévia começa em 280 px e vai até 1920 px. Arraste-o até os viewports mínimo e máximo para confirmar que o tamanho da fonte permanece exatamente nos seus valores especificados nos dois extremos — a função clamp() garante isso, mas ver é reconfortante.

No gerador Cubic Bezier, aplique um preset primeiro. Os dez presets nomeados (ease-out-back, ease-in-cubic, etc.) servem como pontos de partida. Aplique um, depois ajuste os controles deslizantes P1 e P2. O canvas redesenha a curva e o bloco de prévia de motion anima a cada mudança.

O tamanho de fonte base do Unit Converter é 16 px por padrão, mas a raiz do navegador pode ser diferente. Se seu projeto definir html { font-size: 62.5% } (10 px), altere o campo de tamanho de fonte base para 10 antes de converter.

Os presets de polígono do Clip Path produzem coordenadas baseadas em porcentagem, então eles escalam corretamente em qualquer tamanho de elemento. O preset de estrela usa dez pontos e funciona como um emblema decorativo somente em CSS.

O Keyframe Animation Builder requer pelo menos dois keyframes. O botão de remoção fica desabilitado quando restam apenas dois frames.

Problemas Comuns e Solução de Problemas

A cor do box shadow mostra apenas os primeiros seis caracteres hex no seletor de cor. O componente sempre adiciona 40 como canal alfa em hex (formato #rrggbbaa). O <input type="color"> nativo exibe apenas a parte RGB. Isso é esperado — o alfa é aplicado separadamente com 25% de opacidade. Se você precisar de uma opacidade diferente, copie o output e ajuste manualmente os dois últimos dígitos hex (ex.: 80 para 50%, ff para 100%).

O gerador Fluid Typography produz valores de intercepto negativos. Isso é correto quando o intercepto-y da equação linear cai abaixo de zero. O valor clamp() ainda resolve para valores dentro do intervalo mín/máx que você especificou — o intercepto negativo é um artefato da interpolação linear, não um bug.

A prévia do Glassmorphism pode aparecer como uma cor sólida em alguns navegadores. A propriedade CSS backdrop-filter requer aceleração de hardware e não é suportada em todos os ambientes. O gerador produz o prefixo -webkit-backdrop-filter junto com a propriedade padrão, mas a prévia na ferramenta em si será afetada se o seu navegador não suportar a propriedade.

A prévia do 3D Transform pisca ao trocar de abas. A transition: transform 0.2s aplicada ao elemento de prévia é reproduzida ao montar. Este é um artefato cosmético do ciclo de montagem da aba e não afeta o código gerado.

A entrada de texto livre de colunas do Grid Builder aceita qualquer string. Se você digitar um valor inválido como abc 1fr, o output CSS conterá esse valor inválido e a prévia ao vivo silenciosamente voltará aos padrões do navegador. Use apenas valores de track de grid CSS válidos: 1fr, auto, min-content, max-content, repeat(3, 1fr), ou valores fixos de pixels/porcentagem.

Privacidade e Segurança

A CSS Generator Suite é executada inteiramente no seu navegador. Nenhum valor CSS, seleção de cor ou dado de entrada é enviado a nenhum servidor. Todos os quinze geradores calculam seu output usando JavaScript puro — nenhuma biblioteca externa é carregada em tempo de execução. A imagem que você faz upload no gerador Image Filter é aberta como uma URL de objeto local (URL.createObjectURL) e nunca é transmitida pela rede. A ferramenta funciona completamente offline após o carregamento da página.

Perguntas Frequentes

A CSS Generator Suite é gratuita? Sim, a ferramenta é completamente gratuita e não requer conta. Abra a página e comece a gerar imediatamente.

Funciona offline? Sim. Uma vez que a página seja carregada no seu navegador, todos os geradores funcionam sem conexão à internet porque cada cálculo é executado localmente em JavaScript.

Meus dados estão seguros? Suas entradas nunca saem do seu navegador. Não há análises de valores CSS individuais, nem envios de formulários, nem processamento no servidor de qualquer tipo.

Quantas camadas de box shadow posso adicionar? A interface não impõe um limite rígido nas camadas de sombra — você pode continuar clicando em "Add Shadow" para empilhar quantas camadas forem necessárias. Os navegadores suportam qualquer número de valores de sombra separados por vírgulas em uma única declaração box-shadow, embora o output gerado possa se tornar muito longo com muitas camadas.

A ferramenta produz classes Tailwind além de CSS vanilla? A descrição da configuração e alguns geradores fazem referência ao output Tailwind. O unit converter copia valores em unidades brutas adequadas para um arquivo de configuração Tailwind. Outros geradores produzem declarações de propriedades CSS padrão que você pode usar diretamente na prop style do Tailwind ou nos blocos @layer.

Posso usar o output do gerador clip-path para SVG? Não. O output usa a sintaxe de porcentagem CSS clip-path (ex.: polygon(50% 0%, 100% 100%, 0% 100%)), que se aplica a elementos HTML. Elementos SVG clipPath usam um sistema de coordenadas e sintaxe diferentes.

O canvas cubic bezier não mostra a curva no mobile — é um bug? O elemento canvas é renderizado usando o contexto 2D do HTML5. Em alguns navegadores móveis, os canvas dentro de contêineres de overflow com rolagem podem não ser renderizados corretamente até que um evento de rolagem ocorra. Tente rolar levemente a página para acionar um redesenho, ou use um navegador desktop para a aba bezier.

O que a opção de sintaxe de 8 valores faz no Border Radius Generator? O CSS border-radius aceita um segundo conjunto opcional de quatro valores separados por uma barra: border-radius: TL TR BR BL / TL TR BR BL. O primeiro conjunto controla o raio horizontal de cada canto e o segundo controla o raio vertical, produzindo cantos elípticos. Isso cria formas de blob orgânicas que não podem ser alcançadas com a sintaxe padrão de 4 valores.

Posso salvar minhas configurações entre sessões? A ferramenta não persiste configurações no localStorage entre carregamentos de página — reabrir a página redefine todos os geradores para seus padrões. Se você encontrar uma combinação que deseja reutilizar, copie o output CSS para o seu editor ou folha de estilos imediatamente.

O gerador Fluid Typography usa min() e max() ou clamp()? O gerador produz clamp(min, preferred, max). O valor preferido é a expressão de interpolação linear (intercept + slope * vw). Esta é a abordagem moderna recomendada e é suportada em todos os navegadores atuais.

Ferramentas Relacionadas

• CSS Generators — O próprio suite, para qualquer coisa não coberta pelas ferramentas especializadas abaixo.
• Type Scale Generator — Construa uma escala tipográfica modular completa com proporções musicais, produzindo variáveis CSS, variáveis SCSS ou um bloco de configuração fontSize do Tailwind.
• Glitch Effect Generator — Gere efeitos de texto glitch CSS animados com cores, velocidade e intensidade personalizáveis.
• Color Converter — Converta hex, RGB, HSL e outros formatos de cor para usar nas entradas do seu gerador CSS.
• Gradient Generator — Crie fundos de gradiente CSS com prévia ao vivo.

Experimente a CSS Generator Suite agora: CSS Generator Suite