CodeKitHubO que é esta ferramenta?
Esta ferramenta combina um text-shadow claro e um escuro, deslocados em direções opostas, para criar a ilusão de texto elevado (em relevo) ou esculpido (gravado).
Alterne entre os estilos Em Relevo e Gravado, e ajuste o cursor de intensidade para controlar a força do efeito 3D.
Uma pré-visualização em tempo real atualiza-se instantaneamente à medida que digita ou ajusta qualquer definição, para poder afinar o efeito antes de copiar o CSS.
Por que usar?
- Você quer que o logotipo no rodapé do site institucional pareça gravado numa placa metálica prateada, mas sem depender de uma imagem exportada, mantendo o site leve.
- Está montando um portfólio com visual retrô estilo Windows 95 de propósito e precisa que os rótulos dos botões e painéis tenham aquele relevo tridimensional característico.
- Trabalha numa loja virtual e quer que os selos de "produto premium" pareçam gravados em couro ou metal, mas já tentou só com box-shadow e não conseguiu o efeito certo.
- Recebeu um mockup de design com "texto em relevo" e precisa recriar isso em CSS puro, sem exportar imagem, mas não sabe como combinar os valores de text-shadow.
- Está mexendo no controle de intensidade e comparando a prévia ao vivo para achar o ponto certo entre um relevo discreto e uma gravação mais forte, de acordo com o clima visual do site.
- O design do projeto do cliente ainda não pode ser divulgado publicamente, então é bom saber que tudo roda no navegador e o CSS copiado não passa por nenhum servidor externo.
Como usar
- Digite o texto que quer estilizar.
- Escolha Em Relevo (elevado) ou Gravado (esculpido) no seletor de estilo.
- Ajuste o cursor de intensidade e escolha uma cor de fundo e de texto que combinem com o seu design.
- Clique em «Copiar» para copiar o código CSS gerado e cole-o na sua folha de estilos.
Exemplo
Entrada
Texto: "Embossed", Estilo: Em Relevo, Intensidade: 2Resultado
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);O CSS gerado define a cor do texto, a cor de fundo e um text-shadow de duas camadas que cria o efeito elevado ou esculpido.
Como funciona o efeito
Os efeitos em relevo e gravado são construídos a partir de duas camadas de text-shadow deslocadas, com cores claras e escuras opostas.
| Propriedade | Finalidade |
|---|---|
| Sombra clara (rgba(255,255,255,0.7)) | Simula uma fonte de luz a incidir numa aresta do texto |
| Sombra escura (rgba(0,0,0,0.5)) | Simula uma sombra a cair na aresta oposta |
| Direção do deslocamento | Invertida entre Em Relevo e Gravado para trocar a ilusão 3D |
| Intensidade | Controla a distância a que as sombras clara e escura são deslocadas do texto |
| Cores correspondentes | Cor do texto e do fundo definidas próximas para ocultar o contraste plano |
Ferramentas relacionadas
Para mais geradores CSS, experimente estes.
→ Gerador de Glassmorphism CSS · Gerador de Box Shadow · Gerador de Border Radius
Onde usar esse efeito em projetos reais
Marcas tradicionais e empresas familiares no Brasil e em Portugal costumam querer aquele visual de placa metálica gravada ou selo em relevo no logotipo, remetendo a solidez e tradição. Antes, esse efeito exigia exportar uma imagem no Photoshop e gerar versões em diferentes tamanhos para cada breakpoint responsivo. Implementando só com text-shadow, o logotipo continua sendo texto de verdade — melhor para SEO e acessibilidade — e não perde nitidez em nenhuma resolução de tela.
Sites de vinícolas, cafeterias artesanais e lojas de produtos "gourmet" também usam bastante esse tipo de efeito para remeter a rótulos gravados em madeira ou couro. Combinando o estilo Gravado com cores próximas ao fundo — como tons terrosos ou vinho — dá para simular esse acabamento premium sem precisar de nenhuma imagem extra carregando a página.
Perguntas frequentes
Qual é a diferença entre Em Relevo e Gravado?
Em Relevo faz o texto parecer elevado em relação ao fundo, com a sombra clara no canto superior esquerdo e a sombra escura no canto inferior direito. Gravado inverte isto, fazendo o texto parecer esculpido no fundo.
Porque é que o efeito fica melhor com uma cor de texto e de fundo semelhantes?
A ilusão de relevo/gravação depende inteiramente dos realces e sombras, não do contraste entre texto e fundo — por isso, definir a cor do texto próxima (ou igual) à cor de fundo costuma dar o resultado mais limpo.
Posso usar este efeito em qualquer elemento, não só em texto?
A propriedade text-shadow que esta ferramenta gera só se aplica a texto. Para um efeito semelhante em formas ou botões, seria necessária uma configuração de box-shadow comparável.
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 — o text-shadow tem excelente suporte em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.
O efeito fica bom sobre um fundo com gradiente ou imagem, e não só cor sólida?
Como o efeito depende da proximidade entre a cor do texto e a cor do fundo, sobre um gradiente ou imagem vale escolher como cor do texto um tom representativo dessa área para reduzir o estranhamento visual. Em fundos com muito contraste de claro e escuro, a direção da luz simulada pode parecer pouco natural.
Dá para usar isso em botões, não só em títulos?
Sim. O text-shadow se aplica a qualquer elemento que contenha texto, então funciona bem no rótulo de um botão. Se você também quiser dar profundidade ao próprio botão (não só ao texto dentro dele), vale combinar com um box-shadow separado.
O que acontece se eu aumentar demais a intensidade?
Com a intensidade muito alta, a sombra clara e a escura ficam tão afastadas do texto que o efeito deixa de parecer relevo tridimensional e passa a parecer só uma sombra dupla comum. Na maioria dos casos, valores mais baixos de intensidade mantêm o efeito mais natural.
O efeito funciona bem com acentos e caracteres especiais do português?
Sim, o text-shadow se aplica a qualquer caractere renderizado pela fonte, incluindo acentos como ç, ã e ê. Só fique atento: com intensidade muito alta em fontes de traço fino, os acentos podem ficar visualmente "grudados" nas letras — fontes com traço mais grosso deixam o efeito mais legível.