Geradores CSS
Design CSS visually and copy the code — build gradients and box-shadows with a live preview, no guesswork.
Sobre Geradores CSS
Algumas propriedades CSS são quase impossíveis de escrever às cegas. Gradientes e sombras de caixa são os dois piores casos: a sintaxe empacota vários valores em uma linha, e uma pequena mudança em qualquer um deles pode transformar o resultado. Esta categoria tem dois construtores visuais exatamente para isso — o gerador de gradiente CSS e o gerador de sombra de caixa CSS. Você ajusta os controles, observa uma pré-visualização ao vivo se atualizar, e copia a regra final quando ela fica boa. Ele é para desenvolvedores front-end, designers e qualquer pessoa ajustando um tema que prefere ver o resultado a adivinhar números.
Recorra ao gerador de gradiente sempre que precisar de um fundo que seja mais do que uma cor sólida — uma seção de destaque, um botão, um cabeçalho de cartão, uma sobreposição que deixa o texto legível sobre uma imagem. As partes que compensam experimentar são o ângulo e a posição de cada parada de cor, já que mover uma parada é o que transforma uma mistura suja em uma limpa. Use o gerador de sombra de caixa para profundidade: cartões, menus suspensos, modais e botões que precisam parecer elevados. Sua lição útil é que deslocamento, desfoque e espalhamento fazem coisas bem diferentes, e as sombras que parecem convincentes costumam ser mais suaves e mais transparentes do que o instinto sugere — um desfoque grande com baixa opacidade se lê como luz, enquanto uma sombra escura e dura se lê como um adesivo. Ambas as ferramentas produzem CSS padrão que você cola diretamente em uma folha de estilo.
Ambas são gratuitas, não precisam de cadastro, e rodam inteiramente no seu navegador, então nada do que você projeta é enviado e a pré-visualização é instantânea em vez de uma ida e volta. O que você obtém é uma declaração background ou box-shadow simples para copiar — sem framework, sem dependência, sem comentário de atribuição. Duas coisas valem saber: a pré-visualização mostra como o seu próprio navegador renderiza a regra, então verifique outros navegadores para qualquer coisa crítica, e sombras pesadas ou gradientes grandes em muitos elementos podem custar desempenho de renderização em dispositivos mais fracos. Para escolher as cores que você alimenta em um gradiente, a categoria de ferramentas de cor tem um conversor, um gerador de tons e um verificador de contraste.
Perguntas frequentes
O CSS gerado funciona em todos os navegadores?
Gradientes lineares e radiais e box-shadow são compatíveis com todos os navegadores atuais sem prefixos de fornecedor. Você só precisa de versões prefixadas para navegadores genuinamente antigos, que quase nenhum projeto tem como alvo hoje. Se o seu tiver, verifique o requisito específico em vez de presumir.
Posso usar estes gradientes e sombras em um projeto comercial?
Sim. A saída é CSS comum que você escreveu usando um editor visual. Não há nada para licenciar, creditar ou atribuir.
Por que a minha sombra fica diferente no meu site em relação à pré-visualização?
Geralmente por causa do contexto ao redor dela. Uma sombra se lê de forma diferente contra um fundo colorido do que contra um branco, e pode ser cortada por um elemento pai com overflow oculto ou ficar escondida atrás de um irmão com ordem de empilhamento maior. A regra em si é a mesma.
Posso adicionar várias sombras ou mais de duas cores de gradiente?
O CSS dá suporte a ambos: box-shadow aceita uma lista separada por vírgulas, e gradientes aceitam quantas paradas de cor você quiser. Sobrepor duas ou três sombras com desfoques diferentes é como se obtém a profundidade mais realista.