Utilore

Generador de sombras CSS

Mueve los controles y la muestra cambia con ellos. Apila capas cuando una sombra no basta: así se consigue la profundidad suave y creíble de las interfaces reales.

Capas

Preajustes

Cómo usarlo

  1. Elige qué vas a sombrear: un bloque o texto.
  2. Ajusta desplazamiento, desenfoque y color: la muestra se redibuja al instante.
  3. Añade una capa si necesitas profundidad: dos o tres sombras tenues se leen mejor que una pesada.
  4. Copia la línea CSS bajo los controles.

Lo que conviene saber

Por qué la sombra de texto tiene menos ajustes

La propiedad text-shadow solo admite desplazamiento, desenfoque y color. La extensión y el modo interior pertenecen únicamente a box-shadow, y un valor de más invalida toda la declaración: el navegador la descarta en silencio y la sombra simplemente desaparece. Al cambiar al modo texto, esos dos controles se ocultan en lugar de confiar en que se ignoren.

Varias capas tenues ganan a una pesada

Una sombra real no es uniforme: es densa justo bajo el objeto y se disuelve al alejarse. Una sola sombra con mucho desenfoque produce un halo gris, mientras que dos o tres capas con distintos desplazamientos y poca opacidad dan la profundidad que se ve en las interfaces bien hechas. La herramienta mantiene cada capa por separado y la línea copiada las enumera en orden.

Preguntas frecuentes

¿Para qué sirve la extensión?

Agranda o encoge la sombra antes de aplicar el desenfoque. Un valor negativo la recoge para que no asome por los lados: ese es el truco de las sombras limpias en tarjetas, donde el resplandor debe quedar bajo el bloque y no alrededor.

¿Cómo hago una sombra interior?

Marca «Sombra interior»: la palabra inset aparece al principio de la línea y la sombra se traslada dentro del bloque. Se usa en botones pulsados y campos de entrada, donde la profundidad debe leerse como un hundimiento, no como una elevación.

¿Por qué no se ve mi sombra?

Casi siempre porque la opacidad está a cero, o porque el desplazamiento y el desenfoque son cero y la sombra queda escondida justo detrás del bloque. También desaparece si el elemento padre tiene overflow: hidden y la sombra cae fuera del área visible.

¿Funciona en todos los navegadores?

Sí. Tanto box-shadow como text-shadow son estándar desde hace años y no necesitan prefijos; los valores que produce esta herramienta son CSS puro, sin extensiones de fabricante.

Herramientas relacionadas