CodeKitHubO que é esta ferramenta?
Esta ferramenta aplica um gradiente linear predefinido de três paragens para cada estilo metálico, ajustado para parecer luz a refletir numa superfície metálica polida.
Alterne entre Ouro, Prata, Bronze e Ouro Rosa através do seletor de estilo, cada um com o seu próprio gradiente, cor de texto e sombra ajustados a esse metal.
Uma pré-visualização em tempo real atualiza-se instantaneamente à medida que digita o texto do botão, muda de estilo ou ajusta o raio dos cantos, para poder ver exatamente o resultado antes de copiar o CSS.
Por que usar?
- Você está montando a landing page de um curso online ou mentoria e quer um botão dourado de "Inscreva-se agora", mas sem exportar imagem, mantendo a página leve.
- Sua loja virtual tem um programa de fidelidade com níveis Prata, Ouro e Platina, e você quer que cada selo de nível use a cor metálica correspondente para reforçar a hierarquia visual.
- Está criando o site de convite de um casamento e quer um botão "Confirmar presença" em ouro rosa, mas um gradiente simples ficou com aparência barata em vez de elegante.
- O cliente pediu "algo com aparência premium" para o botão principal, e um gradiente de duas cores comum não está dando o brilho metálico que ele imaginou.
- Você alterna entre os quatro estilos metálicos e ajusta o border-radius direto na prévia para achar o acabamento que mais combina com o tom geral do site.
- O design da landing page ainda não foi lançado publicamente, então prefere que o CSS não passe por nenhum servidor externo — tudo aqui é gerado no navegador.
Como usar
- Digite o texto do seu botão.
- Escolha um estilo metálico — Ouro, Prata, Bronze ou Ouro Rosa.
- Ajuste o cursor do raio da borda para corresponder ao estilo de cantos do seu design.
- Clique em «Copiar» para copiar o código CSS gerado e cole-o na sua folha de estilos.
Exemplo
Entrada
Texto: "Buy Now", Estilo: Ouro, Raio: 8Resultado
background: linear-gradient(180deg, #f9e28c 0%, #d4a017 50%, #f9e28c 100%);
color: #5c3d00;
border: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(212,160,23,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
padding: 12px 32px;
font-weight: 600;
cursor: pointer;O CSS gerado combina um gradiente metálico de três paragens, uma cor de texto e sombra correspondentes, e um preenchimento padrão de botão para um bloco de estilo pronto a usar.
Estilos metálicos num relance
Cada estilo metálico usa o seu próprio gradiente, cor de texto e cor de sombra ajustados.
| Estilo | Tom do Gradiente | Cor do Texto |
|---|---|---|
| Ouro | Dourado-amarelo quente, claro a escuro a claro | Dourado-castanho profundo (#5c3d00) |
| Prata | Cinzento claro frio, claro a escuro a claro | Cinzento escuro (#333333) |
| Bronze | Cobre-castanho quente, claro a escuro a claro | Castanho profundo (#3e2408) |
| Ouro Rosa | Rosa suave e delicado, claro a escuro a claro | Rosa profundo (#4a1620) |
Ferramentas relacionadas
Para mais geradores CSS, experimente estes.
→ Gerador de Texto Néon · Gerador de Texto em Relevo CSS · Gerador de Raio de Borda
Onde esse estilo aparece em sites brasileiros e portugueses
Landing pages de cursos online, mentorias e consultorias no Brasil costumam usar o dourado no botão principal de chamada para ação — "Garanta sua vaga", "Inscreva-se agora" — para transmitir exclusividade e valor. Em páginas de produtos ou serviços de ticket mais alto, um botão dourado metálico geralmente passa mais credibilidade do que os clássicos botões vermelhos ou verdes chapados, que já viraram sinônimo de "oferta genérica".
Programas de fidelidade de lojas virtuais e companhias aéreas também usam bastante essa lógica de cores metálicas por nível — Prata, Ouro, Platina — tanto no Brasil quanto em Portugal. Dar a cada nível um botão ou selo na cor metálica correspondente ajuda o cliente a reconhecer de forma instantânea o próprio status dentro do programa, e cria um incentivo visual claro para avançar para o próximo nível.
Perguntas frequentes
Porque é que o gradiente tem três paragens de cor em vez de duas?
Um gradiente de três paragens (claro, escuro, claro) imita a forma como a luz reflete numa superfície metálica curva ou escovada, o que parece muito mais realista do que um simples desvanecimento de duas cores de claro para escuro.
Posso usar isto num link ou div em vez de um elemento de botão?
Sim — o CSS gerado são apenas propriedades padrão de background, color, border-radius, box-shadow e text-shadow, por isso funciona em qualquer elemento que normalmente estilizaria como um botão.
Porque é que a cor do texto é escura em vez de branca?
Superfícies metálicas como ouro e bronze ficam melhor com uma cor de texto escura e quente que combine com o tom do metal — o texto branco tende a parecer plano e a quebrar a ilusão metálica.
Esta ferramenta guarda ou regista o que eu digito?
Não. O CSS é gerado inteiramente no seu navegador — nada é enviado ou armazenado num servidor.
Isto funciona em todos os navegadores?
Sim — linear-gradient, box-shadow e text-shadow têm excelente suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
Dá para adicionar uma animação de brilho quando passo o mouse por cima?
O CSS gerado por esta ferramenta é apenas o estilo estático, mas você pode usar o gradiente gerado como base e adicionar você mesmo um `:hover` que intensifique o box-shadow ou use `filter: brightness()` para clarear levemente o botão, criando uma interação mais sofisticada.
Esse estilo combina com um site em modo escuro?
Sim. Cores metálicas como ouro e ouro rosa têm boa saturação e mantêm contraste suficiente mesmo sobre fundos escuros, funcionando bem como botão de destaque em sites com dark mode. A cor prata pode perder contraste dependendo do tom exato do fundo escuro, então vale conferir na prévia com a cor real do seu site.
Posso mudar o ângulo do gradiente gerado?
Esta ferramenta gera o gradiente de cima para baixo (180deg) por padrão, mas você pode editar manualmente o valor do ângulo dentro do `linear-gradient` no CSS copiado para simular a luz vindo de outra direção, como diagonal.
Posso usar mais de um estilo metálico na mesma página sem ficar poluído?
Se o objetivo é diferenciar níveis ou planos (como Prata, Ouro e Platina), usar vários estilos metálicos ao mesmo tempo funciona bem e ajuda a comunicar a hierarquia. Já quando há vários botões de call-to-action normais na mesma página, misturar muitos estilos metálicos pode quebrar a identidade visual — nesse caso, o ideal é manter um estilo principal e reservar um metal diferente só para o botão mais importante.