Gerador de CSS
- Os arquivos não saem do seu dispositivo
- Roda no navegador
- Grátis, sem cadastro, sem marca d’água
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]Como usar Gerador de CSS
Gere CSS visualmente com prévia ao vivo: sombra de caixa, clip path, easing cubic bezier, glassmorphism, raio de borda em blob e sombra de texto. Cada gerador dá CSS simples e uma classe de valor arbitrário do Tailwind, prontos para copiar.
- 1
Escolha um gerador: Sombra de caixa, Clip path, Cubic bezier, Glassmorphism, Raio de blob ou Sombra de texto.
- 2
Comece por um preset, ou ajuste os controles e as cores.
- 3
Arraste direto na prévia onde houver: pontos do clip-path, as duas alças bezier ou as alças do blob.
- 4
Copie o CSS ou a classe Tailwind da saída abaixo.
Perguntas frequentes
Posso empilhar várias sombras?
Sim. Em Sombra de caixa, clique em Adicionar camada para combinar camadas, cada uma com o próprio deslocamento, desfoque, espalhamento, cor, opacidade e inset.
Como acrescento ou removo pontos em um clip path?
Dê um clique duplo na borda da forma para acrescentar um ponto; selecione um ponto e pressione Delete para removê-lo. Formas Círculo, Elipse e Inset usam controles no lugar.
Por que não consigo ver o efeito de vidro?
backdrop-filter só desfoca o que está atrás do elemento, então precisa de um fundo colorido ou movimentado. A saída inclui o prefixo -webkit- para o Safari.
O que valores bezier fora de 0–1 fazem?
Valores de Y acima de 1 ou abaixo de 0 fazem o movimento ultrapassar, o que dá um efeito de quique ou antecipação. Pressione Tocar para comparar com o movimento linear.
A saída Tailwind precisa de um plugin?
Não. Ela usa a sintaxe de valor arbitrário do Tailwind, como rounded-[…] ou [clip-path:…], que funciona no Tailwind padrão.