CodeKitHub¿Qué es esta herramienta?
Esta herramienta combina un text-shadow de color claro y otro de color oscuro, desplazados en direcciones opuestas, para crear la ilusión de texto elevado (en relieve) o tallado (grabado).
Cambia entre los estilos Relieve y Grabado, y ajusta el control deslizante de intensidad para controlar cuán fuerte se ve el efecto 3D.
Una vista previa en vivo se actualiza al instante mientras escribes o ajustas cualquier configuración, para que puedas afinar el efecto antes de copiar.
¿Por qué utilizarlo?
- Estás maquetando una landing page con estética neumórfica y quieres que el título principal se sienta "presionado" sobre el fondo, no plano — ajusta el estilo a Grabado y copia el text-shadow directo a tu CSS.
- Necesitas recrear el look de una placa metálica grabada para el logo de una marca retro o industrial, y hacerlo a mano ajustando valores de text-shadow te llevaría media hora de prueba y error.
- Estás diseñando una insignia o sello tipo "verificado" para un sitio y quieres que el texto se vea ligeramente elevado sobre el fondo, como si fuera una moneda o medalla en relieve.
- Un cliente te pidió un botón con estética de Windows 95 o interfaz esqueumórfica para un proyecto nostálgico, y el efecto de relieve es la base de ese estilo visual.
- Ajustaste la intensidad al máximo y el efecto se ve exagerado para tu diseño — baja el control deslizante y observa la vista previa en vivo hasta encontrar un relieve sutil que no distraiga del contenido.
- Quieres aplicar el mismo efecto a varios títulos de tu sitio con distintos colores de fondo — genera el código para cada combinación de color y verifica en la vista previa que el contraste siga funcionando antes de copiarlo.
Cómo utilizarlo
- Escribe el texto que quieres estilizar.
- Elige Relieve (elevado) o Grabado (tallado) en el selector de estilo.
- Ajusta el control deslizante de intensidad y elige un color de fondo y de texto acordes con tu diseño.
- Haz clic en "Copiar" para copiar el código CSS generado y pégalo en tu hoja de estilos.
Ejemplo
Entrada
Texto: "Embossed", Estilo: Relieve, Intensidad: 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);El CSS generado establece el color del texto, el color de fondo y un text-shadow de dos capas que crea el efecto elevado o tallado.
Cómo funciona el efecto
Los efectos de relieve y grabado se construyen a partir de dos capas de text-shadow desplazadas, con colores claros y oscuros opuestos.
| Propiedad | Función |
|---|---|
| Sombra clara (rgba(255,255,255,0.7)) | Simula una fuente de luz que incide sobre un borde del texto |
| Sombra oscura (rgba(0,0,0,0.5)) | Simula una sombra que cae sobre el borde opuesto |
| Dirección del desplazamiento | Se invierte entre Relieve y Grabado para voltear la ilusión 3D |
| Intensidad | Controla cuánto se desplazan las sombras clara y oscura respecto al texto |
| Colores similares | Color de texto y fondo ajustados de forma cercana para ocultar el contraste plano |
Herramientas relacionadas
Para más generadores CSS, prueba estos.
→ Generador de Glassmorphism CSS · Generador de Box Shadow · Generador de Border Radius
Cuándo usar relieve y cuándo grabado
Aunque técnicamente son la misma técnica invertida, relieve y grabado comunican sensaciones distintas y conviene elegir según el contexto del diseño.
- Usa Relieve para elementos que quieres que se sientan "presionables", como botones o insignias — el ojo interpreta la superficie elevada como algo interactivo.
- Usa Grabado para etiquetas, marcas de agua o texto informativo que debe sentirse fijo y parte del fondo, como si estuviera tallado en una superficie.
- En interfaces neumórficas (neumorphism), Grabado funciona mejor para campos de entrada o áreas "hundidas", mientras que Relieve se reserva para elementos activos.
- Evita combinar ambos estilos en el mismo bloque visual — mezclar relieve y grabado en elementos cercanos rompe la coherencia de la fuente de luz simulada.
Preguntas frecuentes
¿Cuál es la diferencia entre Relieve y Grabado?
Relieve hace que el texto parezca elevado sobre el fondo, con la sombra clara arriba a la izquierda y la sombra oscura abajo a la derecha. Grabado invierte esto, haciendo que el texto parezca tallado en el fondo.
¿Por qué el efecto se ve mejor con un color de texto y fondo similares?
La ilusión de relieve o grabado depende por completo de las luces y sombras, no del contraste entre texto y fondo — así que ajustar el color del texto cerca de (o igual a) el color de fondo suele dar el resultado más limpio.
¿Puedo usar este efecto en cualquier elemento, no solo en texto?
La propiedad text-shadow que genera esta herramienta solo se aplica al texto. Para un efecto similar en formas o botones, necesitarías una configuración comparable de box-shadow.
¿Esta herramienta guarda o rastrea lo que escribo?
No. El CSS se genera por completo en tu navegador — nada se envía ni se almacena en ningún servidor.
¿Funcionará en todos los navegadores?
Sí — text-shadow tiene excelente compatibilidad en todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.
¿Por qué mi texto no se ve en relieve después de pegar el CSS en mi sitio?
La causa más común es que el color de fondo de tu elemento real no coincide con el background que generó la herramienta, o que el texto tiene un color muy distinto al fondo. Copia también el color de fondo generado, o ajústalo manualmente para que sea igual o muy cercano al color del texto.
¿Puedo combinar el efecto de relieve con una fuente en negrita o muy gruesa?
Sí, pero el resultado cambia: las fuentes gruesas suelen necesitar una intensidad mayor para que el relieve se note, mientras que fuentes finas se ven mejor con una intensidad baja — prueba varios valores en la vista previa en vivo con tu fuente real antes de decidir.
¿El efecto se ve igual sobre un fondo con imagen o degradado?
No exactamente — el efecto está calibrado para un fondo de color sólido. Sobre una imagen o degradado, las sombras clara y oscura seguirán aplicándose, pero la ilusión de relieve puede perder fuerza si el fondo ya tiene mucho contraste propio.
¿Puedo usar esta técnica de relieve en modo oscuro y modo claro del mismo sitio?
Sí, pero necesitas generar dos versiones distintas: los colores de sombra clara y oscura que funcionan bien sobre un fondo claro no producen el mismo efecto sobre un fondo oscuro, así que ajusta el color de fondo en la herramienta para cada tema y copia el CSS correspondiente.