Generador de sombra de texto
Construye un text-shadow de CSS y míralo sobre claro y sobre oscuro a la vez. Copia la declaración cuando quede bien.
¿Te ha sido útil?
Qué hace esta herramienta
Mueve la sombra, difumínala, dale color y ve leyendo el CSS sobre la marcha. La vista previa enseña las mismas letras sobre un fondo claro y otro oscuro, uno al lado del otro, porque una sombra ajustada sobre blanco desaparece del todo sobre oscuro muy a menudo, y ver solo uno de los dos es justo la manera en que eso acaba publicado. Los rangos aquí son a propósito más ajustados que los de las sombras de caja: una sombra de texto se juzga contra las letras, y ahí unos pocos píxeles de más dejan de leerse como profundidad y empiezan a leerse como una segunda palabra borrosa. Cuando quede bien, copia la declaración y pégala.
Para qué te sirve
- Despegar un titular de una foto o de un fondo cargado para que siga siendo legible.
- Dar algo de profundidad a un título de portada sin recurrir a una imagen.
- Montar una sombra dura y desplazada para un aire retro o de cartel.
- Comprobar que la sombra sigue funcionando cuando tu web pasa a modo oscuro.
Cómo se usa
- Ajusta el desplazamiento horizontal y vertical para colocar la sombra.
- Añade desenfoque para una sombra suave, o déjalo a cero para un borde duro.
- Elige el color y baja la opacidad hasta que quede natural.
- Revisa los dos fondos en la vista previa y copia el CSS.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Otras herramientas del mismo campo
DiseñoGenerador de sombras CSS
Crea una sombra box-shadow en CSS con vista previa: ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad, y copia el código. Gratis y en tu navegador.
Conversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Generador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Preguntas frecuentes
¿Por qué no hay opción de extensión?
Porque el text-shadow de CSS no la tiene. Acepta un desplazamiento horizontal, uno vertical, un desenfoque y un color, y ya está. Las sombras de caja tienen extensión y modo interior; las de texto no tienen ninguna de las dos, y por eso aquí son dos herramientas separadas en vez de una con controles que la mitad del tiempo no hacen nada.
¿Por qué la vista previa enseña dos fondos?
Porque una sombra solo se lee en relación con lo que tiene detrás. Una sombra negra suave que da un buen relieve sobre blanco es invisible sobre un fondo oscuro, y con una sombra clara pasa lo contrario. Ver los dos a la vez hace que lo notes tú antes que tus usuarios.
¿Puedo usar un desplazamiento negativo?
Sí. Los valores negativos mueven la sombra a la izquierda y hacia arriba en vez de a la derecha y hacia abajo, que es lo que quieres si la luz viene desde abajo o desde un lado.
¿Cómo consigo una sombra sutil en vez de una pesada?
Mantén los desplazamientos pequeños, añade algo de desenfoque y baja bastante la opacidad, más o menos a una cuarta o una tercera parte. La mayoría de sombras de texto que se ven pesadas son simplemente un color totalmente opaco al que le faltaba suavidad.