Generador de Text Shadow CSS - Crear Efectos de Texto en Línea
Diseña sombras de texto CSS con controles visuales y vista previa en tiempo real. Crea efectos de neón, 3D, relieve, fuego y contorno con múltiples capas de sombra.
Preguntas Frecuentes
¿Qué es CSS text-shadow?
CSS text-shadow es una propiedad que agrega efectos de sombra a los caracteres de texto. A diferencia de box-shadow que se aplica al cuadro delimitador de un elemento, text-shadow sigue los contornos de cada glifo de texto. Acepta desplazamiento horizontal, desplazamiento vertical, radio de desenfoque opcional y color opcional. Se pueden combinar múltiples sombras separadas por comas para efectos creativos como brillo neón, profundidad 3D, contornos y efectos de fuego.
¿Cómo uso este generador de sombras de texto?
Ajusta los controles deslizantes para establecer el desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y opacidad. Elige un color de sombra usando el selector de color. Ve cómo el efecto se actualiza en tiempo real en el texto de vista previa. Agrega múltiples capas para efectos complejos como brillo neón o texto 3D. Personaliza el texto, tamaño de fuente, peso y color de fondo. Copia el código CSS generado a tu hoja de estilos.
¿Cuál es la diferencia entre text-shadow y box-shadow?
text-shadow aplica sombras solo al contenido de texto, siguiendo la forma de cada carácter. box-shadow aplica sombras al cuadro delimitador rectangular de un elemento. Además, text-shadow no soporta spread-radius ni la palabra clave inset que ofrece box-shadow. Usa text-shadow para efectos tipográficos y box-shadow para elevación de contenedores/tarjetas.
¿Cómo creo un efecto de texto neón brillante?
Un brillo neón usa múltiples capas de sombra sin desplazamiento con radios de desenfoque crecientes y un color brillante. Por ejemplo, apila 3-4 sombras con 0 0 7px, 0 0 10px, 0 0 21px y 0 0 42px usando un color neón como #00ff00. El preajuste Neón de esta herramienta aplica esta técnica automáticamente con un clic.
¿Puedo usar múltiples sombras de texto?
Sí. La propiedad CSS text-shadow soporta múltiples sombras separadas por comas. Esta herramienta te permite agregar hasta 10 capas de sombra, cada una con controles independientes. Las sombras se aplican de adelante hacia atrás. Esto permite efectos como texto 3D, texto contorneado, efectos de fuego y más.
¿Cómo creo un efecto de texto 3D/retro?
Un efecto de texto 3D o retro usa múltiples capas de sombra con desplazamientos incrementales y sin desenfoque. Cada capa se desplaza 1px más que la anterior, con colores progresivamente más oscuros. El preajuste Retro 3D de esta herramienta crea esto automáticamente con 5 capas apiladas.
¿Están seguros mis datos de diseño?
Sí. Esta herramienta se ejecuta completamente en tu navegador. No se envían datos a ningún servidor. Tus configuraciones de sombra, texto de vista previa y todas las personalizaciones permanecen en tu dispositivo, garantizando privacidad completa.
Ejemplos de Código
// Generate text-shadow CSS from parameters
function generateTextShadow(layers) {
return layers.map(layer => {
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Generate neon glow effect
function generateNeonGlow(color, layerCount = 4, maxBlur = 42) {
const shadows = [];
for (let i = 0; i < layerCount; i++) {
const progress = (i + 1) / layerCount;
const blur = Math.round(maxBlur * progress);
const opacity = (1 - progress * 0.6).toFixed(1);
const { r, g, b } = hexToRgb(color);
shadows.push(`0 0 ${blur}px rgba(${r}, ${g}, ${b}, ${opacity})`);
}
return shadows.join(', ');
}
// Usage
const shadow = generateTextShadow([
{ offsetX: 2, offsetY: 2, blur: 4, color: '#000000', opacity: 0.5 }
]);
console.log(`text-shadow: ${shadow};`);
// Output: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);