Defina grid-template-columns e as linhas (como repeat(3, 1fr) ou 200px 1fr), gap, auto-flow e alinhamento, e toque em qualquer caixa para fazê-la ocupar 2 colunas ou linhas. Os modelos bento e holy grail mostram layouts comuns. Para cards responsivos, repeat(auto-fill, minmax(200px, 1fr)) quebra as colunas sem media queries.
Como usar
- Escolha um gerador na linha de cima: gradiente, sombra, cantos arredondados, vidro, sombra de texto, clip-path, easing, flexbox ou grid.
- Mexa nos controles ou arraste direto na prévia: paradas na barra do gradiente, pontos do clip-path, alças da curva bezier, as quatro alças do border-radius.
- Se quiser, comece por uma predefinição abaixo do código.
- Toque no código para copiar. As últimas configurações de cada gerador ficam salvas.
- Clique num espaço vazio da barra do gradiente para adicionar uma parada com a cor daquele ponto.
- No modo de 8 valores do border-radius, as quatro alças movem pares de valores, como nas ferramentas “fancy border radius”.
- backdrop-filter precisa do prefixo -webkit- no Safari; o código de vidro inclui os dois.
- Flexbox e grid: toque numa caixa numerada da prévia para dar a ela seu próprio grow, order ou span.
Por que gerar CSS de forma visual
Propriedades como box-shadow, clip-path e cubic-bezier têm vários números cujo efeito é difícil de imaginar. Um box-shadow de 0 10px 30px -5px rgba(0, 0, 0, 0.25) se lê como deslocamento x, deslocamento y, desfoque, expansão e cor; um cubic-bezier(0.34, 1.56, 0.64, 1) passa do ponto porque o segundo valor y é maior que 1. Arrastar a forma e ver o resultado é mais rápido que editar números e recarregar.
O resultado é CSS puro que funciona em todos os navegadores atuais sem framework, então pode ir direto para uma folha de estilos, um objeto CSS-in-JS ou um arquivo de design tokens.
Valores de referência úteis
Ângulos de gradiente começam no topo e giram no sentido horário: 0deg aponta para cima, 90deg para a direita e 180deg para baixo. As palavras-chave de easing equivalem a ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) e ease-in-out = (0.42, 0, 0.58, 1); os valores x precisam ficar entre 0 e 1. O border-radius aceita até oito valores, raios horizontais e verticais separados por barra, e é assim que se fazem formas orgânicas como 30% 70% 70% 30% / 30% 30% 70% 70%.
Dicas para um bom resultado
Sombras realistas vêm de várias camadas suaves, e não de uma escura, e sombras tingidas com a cor do fundo ficam menos sujas que o preto puro. Mantenha o efeito de vidro legível conferindo o contraste do texto sobre a parte mais carregada do fundo. No layout, flexbox serve para linhas ou colunas em uma dimensão e grid para linhas e colunas ao mesmo tempo; toque numa caixa da prévia para dar a ela grow, order ou span próprios.
Perguntas frequentes
Esses efeitos CSS funcionam em todos os navegadores?
Gradientes, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, flexbox e grid funcionam em todos os navegadores atuais. O backdrop-filter, usado no efeito de vidro, precisa do prefixo -webkit- em versões antigas do Safari, então o código traz os dois.
Como faço uma sombra suave e realista?
Empilhe duas ou três camadas com desfoque e deslocamento crescentes e pouca opacidade, por exemplo 0 1px 2px a 8%, 0 4px 8px a 8% e 0 16px 32px a 8%. Os modelos em camadas são um bom ponto de partida.
Qual a diferença entre gradiente linear, radial e cônico?
O linear muda de cor ao longo de uma reta, o radial se espalha a partir de um centro em círculo ou elipse e o cônico gira as cores em volta de um centro como um ponteiro de relógio, útil para gráficos de pizza e rodas de cores.
Como crio uma forma orgânica com border-radius?
Use a sintaxe de oito valores com barra, como 30% 70% 70% 30% / 30% 30% 70% 70%. Arraste as quatro alças na prévia para moldar e copie o resultado.
Dá para animar formas de clip-path?
Sim, entre polígonos com o mesmo número de pontos. Mantenha a contagem igual, adicione uma transition em clip-path e troque o polígono no hover ou com uma classe.
Posso usar o código gerado livremente?
Sim. É CSS comum criado a partir das suas configurações, sem licença nem atribuição obrigatória.