Como usar: Gerador de gradiente e sombra CSS
- 1
Escolha gradiente ou sombra de caixa
Alterne entre os dois editores pelas abas acima da pré-visualização.
- 2
Comece por uma predefinição
Clique em um bloco de predefinição para carregá-la, ou mantenha o padrão e ajuste a partir dele.
- 3
Ajuste visualmente
Arraste as paradas de cor e defina o ângulo, ou adicione camadas de sombra e ajuste deslocamento, desfoque e espalhamento.
- 4
Copie o código
Copie a declaração CSS ou a classe do Tailwind e cole no seu projeto.
Limites e Pro
Grátis e sem cadastro: paradas de cor e camadas de sombra ilimitadas, 3 tipos de gradiente, 3 espaços de mistura de cores e 24 predefinições.
O Pro remove os anúncios; os dois editores são completos em todos os planos. Ver o Pro
Sobre: Gerador de gradiente e sombra CSS
Gradientes e sombras são os dois efeitos de CSS que mais se ajustam na base da tentativa e erro nas ferramentas de desenvolvedor do navegador. Este gerador oferece um editor visual para cada um, com uma pré-visualização grande e ao vivo, e escreve a declaração CSS exata e a classe equivalente do Tailwind com valor arbitrário, como bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], para você colar o resultado direto em uma folha de estilo ou em um className.
O editor de gradiente cria gradientes lineares, radiais e cônicos. Clique na barra de paradas para adicionar uma cor no ponto clicado, arraste uma parada para movê-la ou use as setas do teclado para posições precisas, e dê a cada parada sua própria opacidade. Gradientes lineares e cônicos aceitam um ângulo, radiais e cônicos aceitam um ponto central, radiais aceitam a forma círculo ou elipse, e qualquer um deles pode se repetir para formar listras e anéis. Você também escolhe o espaço de cor usado na mistura: OKLab e OKLCH evitam o meio acinzentado e turvo que a mistura clássica em sRGB produz entre cores saturadas, e são compatíveis com todos os navegadores atuais.
O editor de sombra de caixa empilha quantas camadas você precisar. Cada camada tem deslocamentos X e Y, desfoque, espalhamento, cor com opacidade, um botão de sombra interna e um controle de visibilidade, e as camadas podem ser reordenadas, pois a primeira é pintada por cima. Uma caixa de pré-visualização com tamanho, raio da borda e cores ajustáveis mostra o efeito em uma superfície clara ou escura.
Doze predefinições para cada editor – pôr do sol, rodas de cores e listras; elevações do Material, sombras suaves em camadas, neumorfismo e deslocamentos duros – servem de ponto de partida. A ferramenta cobre apenas gradientes e sombras de caixa; text-shadow, filter: drop-shadow e gradientes SVG não são gerados.
Privacidade
Tudo acontece na própria página: cores e configurações nunca saem do seu navegador e nenhuma imagem é enviada. Seu gradiente e sua sombra atuais ficam salvos no armazenamento local, então continuam lá quando você voltar.
Recursos
Linear, radial e cônico
Paradas de cor arrastáveis com opacidade, ângulo, centro, forma e modo de repetição.
Sombras em várias camadas
Empilhe, reordene, oculte e torne internas as camadas de sombra para criar profundidade realista.
CSS e Tailwind
Copie uma declaração pronta ou uma classe do Tailwind com valor arbitrário.