# Efecto de texto 3D: letras extruidas con buen gusto [Canonical HTML page](https://gradiently.design/es/guide/3d-text-effect) El texto extruido puede parecer un rótulo vintage o un banner web de 2004. La diferencia está en la profundidad, la dirección y el color, y los tres son fáciles de acertar si conoces las reglas. ## The short version - Un efecto de texto 3D, o extrusión, da profundidad a letras planas añadiéndoles laterales sólidos que avanzan en una sola dirección. - El lettering extruido queda con buen gusto cuando la profundidad es corta, de alrededor del 5 al 10 % de la altura de la letra, y los laterales son un tono más oscuro del fondo. - Las tipografías gruesas y sencillas se extruyen bien; las finas, detalladas o script acaban en un revoltijo. - En CSS, un efecto de texto 3D se construye apilando muchas capas de text-shadow, cada una desplazada un paso más, sin desenfoque. - Usa texto extruido para pocas palabras grandes, como un titular o un rótulo, nunca para frases. Un **efecto de texto 3D** hace que las letras planas parezcan sólidas al añadirles laterales, como si cada letra estuviera tallada en un bloque y vista con un ligero ángulo. Con buen gusto, usa una tipografía gruesa, una profundidad corta de alrededor del 5 al 10 % de la altura de la letra, una única dirección constante y laterales de un tono más oscuro del fondo. Mal hecho, usa degradados, brillos, profundidades largas y varias direcciones a la vez. Si lo mantienes simple, el texto extruido parece un rótulo seguro de sí mismo y no un clip art. ## Qué hace que el texto extruido quede bien o cutre ### Queda cutre - Una profundidad mayor que el grosor de las letras - Brillos y biseles - Laterales de un color sin relación con el diseño - Perspectiva que hace que las letras se inclinen hacia atrás - Extrusión sobre una tipografía fina o script - Varios efectos apilados en una palabra ### Queda cuidado - Profundidad corta, de alrededor del 5 al 10 % de la altura - Laterales planos y sólidos, sin brillo - Color lateral tomado de un tono más oscuro del fondo - Una sola dirección, normalmente abajo y a la derecha - Una tipografía gruesa y sencilla de formas abiertas - La extrusión como único efecto La extrusión tiene una larga historia en los rótulos pintados a mano, los carteles de circo y las portadas de discos de los años setenta. Por eso transmite calidez y un punto de nostalgia. Aprovéchalo para cafeterías, helados, marcas infantiles, música y eventos. Para una marca tranquila y minimalista suele ser la voz equivocada; los [efectos de texto](https://gradiently.design/es/guide/text-effects) te ayudan a elegir uno que encaje. ## Cómo elegir profundidad, dirección y color ### Profundidad Los laterales deben ser más cortos que el ancho de los trazos de la letra. En un titular de 160 px, una profundidad de 8 a 16 px se ve sólida; con 40 px empieza a parecer una sombra larga, que es otro estilo. El texto pequeño no puede llevar profundidad, así que limita la extrusión a tamaños de titular. | Tamaño del titular | Profundidad | Sensación | | --- | --- | --- | | 100 px | 5 a 8 px | Un leve realce sobre la página | | 160 px | 8 a 16 px | Un rótulo pintado | | 240 px | 14 a 24 px | Un cartel contundente o una línea de packaging | | Cualquier tamaño, profundidad superior al 20 % | Larga | Una sombra larga: un estilo gráfico distinto | La profundidad como proporción de la altura de la letra decide si el texto extruido se lee como sólido o como sombra. ### Dirección Elige una dirección y mantenla en todos los diseños. Abajo y a la derecha es lo más natural, porque solemos entender que la luz viene de arriba y de la izquierda. Hacia abajo recuerda a bloques apilados. Arriba y a la izquierda resulta raro, lo que puede funcionar para una frase suelta pero cansa enseguida. ### Color Tres tonos hacen todo el trabajo: la cara de la letra, el lateral y el fondo. La cara debe contrastar con fuerza con el fondo. El lateral queda entre ambos, normalmente un tono profundo del fondo o de la cara. Si lo tomas del fondo, la extrusión parece iluminada por la misma luz. - Cara: crema: #fff1d6 - Lateral: óxido: #c2410c - Fondo: naranja: #f97316 - Lateral: azul profundo: #1e3a8a - Fondo: cielo: #60a5fa Dos combinaciones. Letras crema con laterales óxido sobre naranja; o letras crema con laterales azul profundo sobre cielo. En ambas, el lateral es un tono más oscuro del fondo. Una publicación vertical de heladería con la palabra Helados en grande sobre un degradado cálido Una palabra gorda y un fondo cálido: el tipo de titular que le va al lettering extruido. Una publicación cuadrada de evento que anuncia una fiesta de barrio con la hora y los detalles en letra más pequeña Dos palabras cortas en una publicación cuadrada. Con más, la profundidad empieza a saturar la composición. ## Cómo hacer un efecto de texto 3D en CSS CSS no tiene una propiedad de extrusión, pero las sombras apiladas hacen el trabajo. Cada capa de `text-shadow` es una copia sólida de las letras, desplazada un píxel más, sin desenfoque. Apila las suficientes y las copias se funden en laterales sólidos. Una última sombra más suave debajo asienta las letras en la página. ```css .extruded { font-family: "Archivo Black", system-ui, sans-serif; /* load it from Google Fonts */ font-size: 10rem; line-height: 1; color: #fff1d6; text-shadow: 1px 1px 0 #c2410c, 2px 2px 0 #c2410c, 3px 3px 0 #c2410c, 4px 4px 0 #c2410c, 5px 5px 0 #c2410c, 6px 6px 0 #c2410c, 7px 7px 0 #c2410c, 8px 8px 0 #c2410c, 10px 12px 10px rgb(67 20 7 / 0.35); } ``` Ocho capas sólidas crean una extrusión de 8 px hacia abajo y a la derecha, y una sombra final suave la apoya en el suelo. Escribir decenas de capas a mano es tedioso. Unas pocas líneas de JavaScript generan la lista para cualquier profundidad, dirección y color, y puedes pegarla en tu hoja de estilos. ```js // Build a text-shadow value for an extrusion function extrude(depth, color, dx = 1, dy = 1) { const layers = []; for (let i = 1; i <= depth; i++) { layers.push(`${i * dx}px ${i * dy}px 0 ${color}`); } return layers.join(", "); } console.log(extrude(12, "#1e3a8a")); // down and right console.log(extrude(10, "#1e3a8a", 0, 1)); // straight down ``` Pega el resultado en `text-shadow`. Usa pasos de un píxel para que los laterales sigan siendo sólidos. Mantén los titulares extruidos como texto real en un sitio web, para que se puedan buscar, seleccionar y leer con lectores de pantalla. Las sombras no cambian el contraste medido entre letra y fondo, así que asegúrate de que el color de la cara lo cumpla por sí solo. Si prefieres una versión más ligera y gráfica, una única sombra dura sin capas se explica en [sombras de texto](https://gradiently.design/es/guide/text-shadow-alternatives); para un 3D real con iluminación y rotación, entras en el terreno de WebGL, que presentan los [degradados con shaders](https://gradiently.design/es/guide/shader-gradients). ## Cómo hacer lettering extruido paso a paso 1. **Elige entre dos y cuatro palabras** El nombre de una tienda, una oferta, el título de un evento. La extrusión necesita espacio alrededor. 2. **Ponlas en una tipografía gruesa** Una sans o slab de peso black, o una serif retro suave. En [fuentes retro](https://gradiently.design/es/guide/retro-fonts) encontrarás algunas con la calidez adecuada. 3. **Elige los colores de cara, lateral y fondo** Contraste fuerte entre cara y fondo; el lateral, un tono más oscuro del fondo. 4. **Añade profundidad en una sola dirección** Empieza con alrededor del 6 % de la altura de la letra, abajo y a la derecha. Auméntala solo si sigue viéndose plano. 5. **Deja todo lo demás plano** Detalles, fechas y precios en una sans lisa y sólida, sin efecto. ## Texto extruido en Gradiently Relieve es uno de los tratamientos de Lettering de Gradiently: da a cualquier texto del Studio una profundidad sólida hacia abajo y a la derecha, con los laterales dibujados en los colores del propio Mark y un control para la profundidad, así que no hay capas que apilar. El Mark que hay tras el diseño lleva su zona más tranquila detrás de las palabras, de modo que el lettering extruido sigue legible por mucho que cambie el fondo a lo largo del encuadre. El [efecto de texto con contorno](https://gradiently.design/es/guide/outline-text) y otros tratamientos están en el mismo menú por si la extrusión resulta demasiado ruidosa para el mensaje. ## FAQ ### ¿Cómo hago texto 3D en CSS? Apila varias capas de `text-shadow`, cada una desplazada un píxel más en la misma dirección y sin desenfoque, en un color más oscuro que las letras. ### ¿Qué fuente va mejor para un efecto de texto 3D? Las gruesas y sencillas, como una sans de peso black, una slab o una serif retro suave. Las finas y las script quedan desordenadas al extruirse. ### ¿Qué profundidad debe tener el texto extruido? Alrededor del 5 al 10 % de la altura de la letra. Mucho más y se lee como una sombra larga. ### ¿Por qué mi texto 3D parece cutre? Normalmente por demasiada profundidad, brillos o colores laterales sin relación con el diseño. Usa laterales cortos y planos en un tono más oscuro del fondo.